form
- 사용자가 정보를 입력할 수 있게 장치를 만들어 줌
- 다른 페이지나 서버로 전송할 수 있게 해줌
form 특성
1. action
- 폼 데이터를 보낼 주소를 입력함
- 절대 경로 또는 상대 경로
2. method
- 양식을 제출 HTTP 메서드(서버 개념을 이해해야 함 아직은 저두 몰라유)
- GET : 보내려고 하는 주소 뒤에 어떤 데이터를 입력했는지 보여지게 됨
- 데이터가 보여지기 때문에 검색창 등에 사용됨
- POST : 주소창에 입력한 정보가 보이지 않음
- 보낸 요청이 주소로 보이지 않게 숨겨서 보내짐
<form action="" method="get">
<input type="text" name="test">
<button type="submit">제출</button>
</form>
<form action="" method="POST">
<input type="text" name="test">
<button type="submit">제출</button>
</form>
3. label
- input : 사용자가 정보를 입력할 수 있는 영역
- label : 어떤 정보를 입력할지 설명함
- for 속성을 이용해 어떤 input을 가리키는지 명시함
- input에 id 속성을 이용해 찾아줌, id는 한 문서 내에서는 겹치면 안됨
- label과 input을 형제 관계로 사용할 때는 for, id 명시
- label의 자식 요소로 input을 사용할 때는 for, id 필요없음
fieldset, legend
- fieldset : 여러개의 label, input을 묶어서 표현할 때
- legend : 범례
- fieldset 첫번째 자식으로 legend 사용해야 함
- fieldset 사용하면 input 하나하나를 제어하지 않고 한 번에 가능함
<form action="" method="get">
<fieldset disabled>
<legend>범례1</legend>
<div>
<label for="foodname">음식 이름 :</label>
<input type="text" name="food" id="foodname">
</div>
<div>
<label for="color">색깔 :</label>
<input type="text" name="color" id="color">
</div>
</fieldset>
<fieldset>
<legend>범례2</legend>
<div>
<label for="foodname">음식 이름 :</label>
<input type="text" name="food" id="foodname">
</div>
<div>
<label for="color">색깔 :</label>
<input type="text" name="color" id="color">
</div>
</fieldset>
<button type="submit">제출</button>
</form>
input 속성과 관련
1. minlength, maxlength
- 최소 글자수와 최대 글자수를 지정할 수 있음
2. password
- 자동으로 마스킹 되어 보임
3. email
- 이메일 형식이 맞지 않을 때 경고창을 띄워줌
- 모바일에서는 자동으로 영문 키패드를 띄워주는 경우가 많음
4. tel
- 모바일에서는 자동으로 숫자 키패드를 띄워주는 경우가 많음
<form action="" method="get">
<div>
<label>PASSWORD
<input type="password" name="pwd" minlength="5" maxlength="10">
</label>
</div>
<div>
<label>EMAIL
<input type="email" name="email">
</label>
</div>
<div>
<label>TEL
<input type="tel" name="tel">
</div>
<button type="submit">제출</button>
</form>5. number
- 숫자만 입력할 수 있음
6. range
- 바가 나와 정도를 조절할 수 있음
- 숫자의 값으로 변환되서 제출됨
7. date
- 년, 월, 일 날짜를 선택할 수 있음
8.time
- 오전/오후 시간을 선택할 수 있음
<form action="" method="get">
<div>
<label>NUMBER :
<input type="number" name="number">
</label>
</div>
<div>
<label>RANGE :
<input type="range" name="range">
</label>
</div>
<div>
<label>Date :
<input type="date" name="date">
</label>
</div>
<div>
<label>Time :
<input type="time" name="time">
</label>
</div>
</form>
9. submit
- 제출할 수 있는 버튼을 만들 수 있으며 기본값은 '제출'
- value로 문구를 변경할 수 있음
10. button
- 버튼 형태를 띄지만 기능은 없음
<form action="" method="get">
<input type="submit" value="제출하기">
<input type="button" value="빈 버튼">
</form>
11. reset
- 폼 내부에 있는 정보가 기본값으로 돌아가며 기본 문구는 '초기화'
12. checkbox
- 체크할 수 있는 박스를 만듬
- checked 속성을 이용하면 자동으로 체크함
13. radio
- name 속성 : 같으면 그 중 하나만 선택 가능, 다르면 여러개 선택 가능
- 같은 name 속성을 사용할 때 value 값으로 구분
14. name
- input에 name을 넣어줘야지만 폼 데이터 상의 구분이 가능함
15. placeholder
- 아무 값이 들어있지 않을 때 어떤 정보를 입력할 지 사용자에게 힌트를 줌
16. autocomplete
- on / off 로 사용
- 이전에 입력한 적 있던 값을 자동으로 후보로 보여줌
- 설정하지 않으면 브라우저가 설정한 값을 따라감
<form action="" method="get">
<div>
<label>CHECKBOX
<input type="checkbox" name="check1">
<input type="checkbox" name="check1">
<input type="checkbox" name="check1">
</label>
</div>
<div>
<label>RADIO
<input type="radio" name="radio" value="r1">
<input type="radio" name="radio" value="r2">
<input type="radio" name="radio" value="r3">
</label>
</div>
<div>
<label>직업</label>
<input type="text" name="job" placeholder="교사" autocomplete="on">
</div>
<input type="submit">
<input type="reset">17. required
- required 항목을 비워 제출하면 오류 메시지가 뜨면서 제출이 되지 않음
18. disabled
- input 항목이 비활성화
- 폼 전송에 포함되지 않으며 유저가 값을 입력할 수 없음
- js에서 한 항목이 입력되면 다른 항목은 비활성화하게 된다든지 등에 쓰임
19. readonly
- 읽기 전용, 입력한 데이터는 사용자가 수정할 수 없지만 폼 데이터 전송은 됨
- value 속성으로 기본값을 넣어줄 수 있음
<form action="" method="get">
<div>
<label for="job">직업</label>
<input
type="text"
name="job"
id="job"
placeholder="교사"
disabled>
</div>
<div>
<label for="age">나이</label>
<input
type="number"
name="age"
id="age"
value="20"
readonly
/>
</div>
<input type="submit">
</form>
20. step, min, max
- number나 range에서 최소값과 최대값을 설정할 수 있음
- step을 설정하면 1씩 늘어나는 값을 다른 값으로 설정할 수 있음 ex) step="2" 0, 2, 4, 6
<div>
<label for="age">나이</label>
<input
type="number"
name="age"
id="age"
min="0"
max="10"
step="2"
/>
</div>
21. button
- input으로 만들 수 있지만 button 태그를 사용하면 버튼에 텍스트 이외의 다양한 html 속성과 이미지를 넣을 수 있음
- 아이콘만 사용해 버튼을 표현할 경우 접근성을 높이기 위해 텍스트 설명을 써야 함
<button><em>버튼이오</em></button>22. select, option, optgroup
- 여러개의 후보군이 나오고 그 중에서 값을 선택할 수 있음
- option을 통해 후보군 입력
- value를 통해 서버에 전송하고 싶은 값을 입력
- 빈 문자열을 만들고 싶을 때도 value 속성을 이용해야 함
- optgroup : 옵션 여러개를 그룹화할 때 사용
<label for="movie">좋아하는 영화</label>
<select name="movie" id="movie" required>
<option value="">한가지를 고르세요</option>
<optgroup label="animation">
<option value="zootooia">주토피아</option>
<option value="toystory">토이스토리</option>
</optgroup>
<optgroup label="action">
<option value="The Outlaws">범죄도시</option>
</optgroup>
</select>
23. datalist, list
- 입력할 값을 추천해주며 사용자가 값을 수정할 수 있음
<label for="movie">좋아하는 영화</label>
<select name="movie" id="movie" required>
<option value="">한가지를 고르세요</option>
<optgroup label="animation">
<option value="zootooia">주토피아</option>
<option value="toystory">토이스토리</option>
</optgroup>
<optgroup label="action">
<option value="The Outlaws">범죄도시</option>
</optgroup>
</select>
<label for="movie">좋아하는 영화</label>
<input type="text" id="movie" name="movie" list="movie-list">
<datalist id="movie-list">
<option>주토피아</option>
<option>토이스토리</option>
<option>토이스토리2</option>
</datalist>24. textarea
- 댓글이나 리뷰칸을 만들 때 사용됨
- 안에 있는 내용은 들여쓰기, 개행 등 그대로 반영됨
- input과 다른 점은 빈 요소가 아니라 여러 자식 태그를 가질 수 있음, 여러줄 입력이 가능함
- rows, cols로 행과 열을 조정
'html,css 기초' 카테고리의 다른 글
| html 9 : 전역 속성 class, id, style, title, lang, data, draggable, hidden (0) | 2022.07.11 |
|---|---|
| html 8 : 메타데이터 title, meta, link, MIME, style, script (0) | 2022.07.10 |
| html 6 : 임베디드 image, 이미지 유형, srcset, sizes, video, audio, iframe (0) | 2022.07.07 |
| html 5 : 목록과 표 ol, ul, li, dl, dt, dd, div, table, tr, th, td (0) | 2022.07.05 |
| html 4 : 구조 div, span, semantic web, nav, aside (0) | 2022.07.05 |
댓글