1. form (form tag는 사용자가 입력한 데이터를 수집하기 위해 사용됨, 입력 양식 태그를 포함할수 있다.)
<form>
form elements (imput, textarea, button, select, checkbox, radio button, submit button...etc
</form>
| attribute | Value | Description |
| action | URL | 입력데이터(form data)가 전송될 URL 지정 |
| method | get / post | 입력 데이터(form data) 전달 방식 지정 |
Get과 Post는 HTTP 프로토콜을 이용해서 사용자 입력 데이터를 서버에 전달하는 방식(HTTP request method)
| Get - GET 방식은 전송 URL에 입력 데이터를 쿼리 스트링으로 보내는 방식 예) https://seo-ox3.tistory.com/posts?userId=1&id=1 - 전송 URL바로 뒤에 '?'를 통해 데이터의 시작을 알림 |
| Post - request Body에 담아 보내는 방식 ( https://seo-ox3.tistory.com/posts) - URL에 전송 데이터가 모두 노출되지 않지만 Get에 비해 속도가 느림. - Rest API에서 Post 메소드는 특정 리소스 생성을 요청함. |
<!DOCTYPE html>
<html>
<body>
<form action="http://jsonplaceholder.typicode.com/users" method="get">
ID: <input type="text" name="id" value="1"><br>
username: <input type="text" name="username" value="Bret"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
2. Input (form 태그 중에서 가장 중요한 태그로 사용자로부터 데이터를 입력받기 위해 사용됨)
- form tag내에 존재하여야 입력 데이터를 전송 가능
- ajax를 사용할 시, form tag내에 존재하지 않아도 됨
- 서버에 전송되는 데이터
- name : attribute key
- value : attribute value
- key = value 형태로 전송
| type attribute value | Description | HTML5 추가 | IE | FF | CR | SF | OP |
| button | 버튼생성 | ○ | ○ | ○ | ○ | ○ | |
| checkbox | checkbox 생성 | ○ | ○ | ○ | ○ | ○ | |
| color | 컬러 선택 생성 | ○ | X | ○ | ○ | ○ | |
| data | data control(년월일) 생성 | ○ | X | X | ○ | ○ | ○ |
| datatime | data & time control(년월일시분초) 생성 HTML spec에서 drop됨 |
○ | X | X | |||
| datatime-local | 지역 data & time control 생성 | ○ | X | X | |||
| 이메일 입력 | ○ | ○(10~) | ○ | ○ | ○ | ○ | |
| file | 파일 선택 | ○ | ○ | ○ | ○ | ||
| hidden | 감추워진 입력 | ○ | ○ | ○ | ○ | ○ | |
| image | 이미지로 된 submit button 생성 | ○ | ○ | ○ | ○ | ○ | |
| month | 월 선택 form 생성 | ○ | X | X | ○ | ○ | ○ |
| number | 숫자 입력 form 생성 | ○ | ○(10~) | ○ | ○ | ○ | ○ |
| password | password form 생성 | ○ | ○ | ○ | ○ | ○ | |
| radio | radio button 생성 | ○ | ○ | ○ | ○ | ○ | |
| range | 범위 선택 form 생성 | ○ | ○(10~) | ○ | ○ | ○ | ○ |
| reset | 초기화 button 생성 | ○ | ○ | ○ | ○ | ○ | |
| search | 검색어 입력 form 생성 | ○ | X | X | ○ | ○ | X |
| submit | 제출 button 생성 | ○ | ○ | ○ | ○ | ○ | |
| tel | 전화번호 입력 form 생성 | ○ | X | X | X | X | X |
| text | 텍스트 입력 form 생성 | ○ | ○ | ○ | ○ | ○ | |
| time | 시간 선택 form 생성 | ○ | X | X | ○ | ○ | ○ |
| url | url 입력 form 생성 | ○ | ○(10~) | ○ | ○ | X | ○ |
| week | 주 선택 입력 form 생성 | ○ | X | X | ○ | ○ | ○ |
3. Select
<select name="cars1">
<optgroup label="me">
<option value="val1" selected>우주방랑자</option>
<option value="val2" disabled>서파르타</option>
</optgroup>
<optgroup label="you">
<option value="val3" selected>진짜 스파르타식 교육은</option>
<option value="val4" disabled>말아먹은 최악의 실수로 인정</option>
</optgroup>
</select>
(스파르타....최악의 실수라니.....닉넴 잘 못지은건 내 실수가 맞나보다ㅋㅋㅋ)
| tag | Description |
| select | select form 생성 |
| option | option 생성 |
| optgroup | option을 그룹화 |
4. textarea(여러글자를 입력할때 사용)
5. button
- <button type="button" onclick="alert('우주방랑자 서파르타')">눌려보쒜여~</button>
- button tag는 텍스트나 이미지같은 콘텐츠 사용 가능
- <input type="button" value="눌려보쒜여~" onclick="alert('우주방랑자 서파르타')">
- input tag는 빈 tag다...
6. fieldset / legend (관련된 입력양식을 그룹화 할때 사용)
- legend는 feildset 태그 내에서 사용됨
<fieldset>
<legend>Login</legend>
Username <input type="text" name="username">
Password <input type="text" name="password">
</fieldset>
참조 : https://poiemaweb.com/html5-tag-forms
'개발 > HTML' 카테고리의 다른 글
| [HTML] Form tag / input tag 모음집 (0) | 2020.06.06 |
|---|---|
| [HTML] 메타(meta) 태그 정리 / 메타 태그 종류 (0) | 2020.06.05 |
| [HTML] 이미지 표현 / 동영상 / 음악 / 멀티미디어 / Tag (0) | 2020.05.21 |
| [HTML] Table (tag, attribute) (0) | 2020.05.20 |
| [HTML] 목록 List /<ul> / <ol> / <il> (0) | 2020.05.20 |
