티스토리 뷰
폼 관련 요소
⬛ form 소개
폼에서 사용자에게 입력을 받아
서버나 페이지로 정보를 전달하는 form! 🚑
대화형 컨트롤이라고 볼 수 있다. 💬
세부적인 폼의 컨트롤은 js의 영역이며, 마크업만으로는 하기 힘들 수 있다.
입력, 체크 박스, 제출 버튼 등이 모두 form에 포함된다.
⬛ form - action, method 속성
🔇 단독 사용하면 보이지 않는다. 🔇
action -
다른 페이지나 서버에 폼 데이터를 전달할 때 지정할 URI이다.
method -
get / post 방식의 눈으로 보이는 차이에 중점을 둬보자!
get 방식 : 원래의 주소에 사용자가 입력한 데이터가 추가된다.
보안에 취약할 수 있다.
post 방식 : get과 달리 데이터를 주소창에 보여주지 않고,
서버 파일에 post 방식의 응답을 지정해줘야 반응한다.
⬛ label과 input
사용자가 입력할 정보에 대한 설명을 label,
입력하는 부분을 input이라고 볼 수 있다.
적절한 labeling을 해주는 것이 웹 접근성 면에서 좋다.
label에는 for 속성이 있는데, 대상이 되는 input의 id를 지정한다.input의 속성인 name은 서버로 데이터를 보낼 때의 input을 특정할 수 있다.
name은 폼 안에서 구분,
id는 label을 위하는 하나의 대상을 지정한다는 차이가 있다. 1️⃣
⬛ fieldset, legend
fieldset으로 요소들을 묶어서 표현하고,legend로 범례를 나타낼 수 있다.
legend는 fieldset의 첫번째 자식이어야 한다.
특정 브라우저 css에 의존하면 안된다!
fieldset을 사용했다면 div를 쓸 필요는 없다!
⬛ input - type
type 속성의 값에 따라 유형을 지정해줄 수 있다.
text, button, datetime, email, file, image, number, radio 등
다양한 유형이 있다.
◻ text - 개행을 시도할 수 없는 한 줄 전용 텍스트 박스이다.minlength와 maxlength로 최소/최대 글자수를 지정 가능하다.
◻ password - 기본적으로 마스킹 처리가 적용된다. ✡✡✡✡✡get 방식으로 지정하면 주소창에 노출되므로 주의!
◻ email - form에서 자동으로 email 형식을 검사한다.
◻ tel - email과 다르게, 전화번호 유효성 검사를 하지 않는다.
모바일 디바이스에서는 숫자 키패드가 자동으로 설정된다.
◻ number - 스피너를 표시하여 정수를 지정할 수 있고, 유효성 검사를 한다.
◻ range - 이동시킬 수 있는 바를 이용하여 범위 따위를 지정한다.
◻ date - 연/월/일을 입력 가능하고, 브라우저에 따라 달력에서 고를 수도 있다.
비슷한 type으로 month, time 등이 있다.
문구를 지정하고 싶다면 value 속성의 속성 값을 지정하면 된다.
◻ button - 아무 동작을 하지 않는 버튼을 생성한다.
◻ submit - 기본 값이 제출 버튼으로 표현된다.
◻ reset - 기본 값이 초기화 버튼으로 표현되고,
폼 내부의 모든 내용이 초기화된다.
◻ checkbox : 체크를 할 수 있는 박스가 나타나고,checked 를 지정하면 기본적으로 체크된 상태로 나타난다.
중복 선택이 가능하다.
◻ radio - checkbox와는 다르게,name이 동일하면 한 덩어리로 취급하여 중복 선택이 불가하다.name이 아닌 value의 데이터가 전달된다.
또 checkbox와 같이, checked를 사용할 수 있다.
◻ color - 지원하지 않는 브라우저가 꽤나 있으므로 (IE 포함) 주의해야 한다.
⬛ input - name, placeholder, autocomplete, required
📰 name - 폼 내에서 어떤 데이터인지 구별하는 역할을 한다.
📰 placeholder - 기본값과는 다르게, 값에 대한 예시를 힌트로 주는 것과 비슷하다.
📰 autocomplete - on 으로 설정하면, 자동완성 기능이 추가된다.
그 기능이 싫다면 off로 변경하면 된다!
📰 required를 지정하면, 입력하는 란이 ❗필수란❗이 된다.
입력하지 않으면 제출되지 않고 경고가 나타난다.
⬛ input - disabled, readonly
🎲 disabled - 사용자가 입력할 수 없도록 지정한다.
입력하지 않은 required가 아닌 입력 란을 제출하면 값만 존재하지 않지만,
disabled로 지정하면 input 자체를 비활성화 한다.
🎲 readonly - 말 그대로 읽기 전용! 📃
input 자체가 비활성화되지는 않지만, 입력이 불가하다.value로 '바꾸지 않는 기본 값' 을 설정하는 용도로 쓸 수 있다.
⬛ input - step, min, max
📊 step - 값이 변하는 간격을 조정해줄 수 있다.
📊 min - 최솟값을 지정한다.
📊 max - 최댓값을 지정한다.
⬛ button
클릭 가능한 버튼을 말한다. 🆗🆖name, type, value 등의 속성을 input 태그와 공통적으로 가진다.<button> 요소는 type이 reset, submit, button인 input 태그와 달리
자식 요소를 가질 수 있어 스타일링에 더 용이하다.
접근성을 고려하여 텍스트 설명을 button 요소에 포함하는 것이 좋다.
⬛ select, option, optgroup
✅ select - 드롭다운 메뉴를 생성한다.
✅ option - select의 자식 태그이다.
서버로 보낼 데이터를 value의 속성값으로 지정 가능하다.'옵션을 선택하세요.' 를 드롭다운 되기 전의 기본 값으로 보여주고 싶다면,
value에 ""를 입력한다.
selected 속성을 부여하면 해당 메뉴를 기본적으로 선택할 수 있다.
✅ optgroup - 드롭다운 메뉴(option)들을 묶어주어 구분할 수 있다.
label 속성을 지정하여 라벨링을 해줄 수 있다.
⬛ input - list 속성과 datalist
input의 list 속성에 datalist의 id를 지정해주면
서로 연관성을 갖게 되고,
datalist 요소의 자식 요소로 option들을 넣어주면
선택 가능한 메뉴들을 보여준다. (추천하는 느낌으로!) 🎯
select와 다른 점은, datalist의 option들은
수정이 가능하다는 점이다. (원문 그대로가 강제되지 않는다.)
⬛ textarea
text 요소와 다르게, 여러 줄의 텍스트를 입력받을 수 있다. 🎫
또한 빈 요소가 아니다.
내부에 자식 요소를 포함할 수 있는데,
텍스트를 포함하게 된다면 <pre> 태그처럼 개행과 공백을 입력하는 대로 반영한다.
rows 속성값을 조절하면, 보여줄 줄 수를 변경할 수 있다.
하지만 rows, cols는 폰트 크기에 의존할 수 있기에,
css로 지정하는 것이 적합할 수 있다.
❗ 실습해보자 ❗
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>실습</title>
<style>
/* 매우 간단한 CSS만 적용 */
form {
position: relative;
width: 600px;
height: 500px;
margin: 0;
}
.formContainer {
position: absolute;
text-align: center;
}
.label {
float: left;
line-height: 2em;
}
.form {
display: inline-block;
margin: 0;
}
input,
select {
margin: 0.5em;
}
.email {
margin-bottom: 2em;
}
.btn {
background-color: black;
color: white;
border-radius: 30px;
border: none;
padding: 5px 20px;
font-size: 1em;
}
</style>
</head>
<body>
<form>
<div class="formContainer">
<div class="label">
이름* <br />
나이* <br />
성별* <br />
학년 <br />
이메일 <br />
</div>
<div class="form">
<input type="text" required /> <br />
<input type="number" required /> <br />
<input type="radio" name="sex" required />남
<input type="radio" name="sex" required />여 <br />
<select>
<optgroup label="예외">
<option name="state" value="leave">휴학</option>
<option name="state" value="drop">자퇴</option>
</optgroup>
<optgroup label="학년">
<option name="grade" value="1"> 1</option>
<option name="grade" value="2"> 2</option>
<option name="grade" value="3" selected> 3</option>
<option name="grade" value="4"> 4</option>
</optgroup>
</select>
<br />
<input
type="email"
name="email"
class="email"
placeholder="aaa@bbb.ccc"
/>
<br />
</div>
<div class="SubmitOrReset">
<input type="submit" class="btn" value="다음으로" />
<input type="reset" class="btn" value="취소" />
</div>
</div>
</form>
</body>
</html>간단한 회원정보로 가입할 수 있는초초초 간단 폼을 만들어 보면서,
기본적으로 쓰는 방법과value, selected, required, placeholder 속성들을 적용해 보았다.
라벨 부분과 input 부분을
다른 구역으로 나누어(div) 폼이 정렬되게 보이는 방식으로 해 보았다.
'Programming Language > HTML, CSS, JavaScript' 카테고리의 다른 글
| [HTML/CSS] 임베디드 요소 (0) | 2022.02.07 |
|---|---|
| [HTML/CSS] 목록과 표 (0) | 2021.11.15 |
| [HTML/CSS] 구조를 나타내는 요소와 시멘틱 웹 (0) | 2021.11.13 |
| [HTML/CSS] 메타데이터 요소 (0) | 2021.11.10 |
| [HTML/CSS] 텍스트 요소 (0) | 2021.11.09 |
- Thanks for comming.
- 오늘은
- 명이 방문했어요
- 어제는
- 명이 방문했어요