1. from 태그
<body>
<form>
</form>
</body>
2. 기본 input 태크
<body>
<form>
<input type="text" name="name" /><br />
<input type="password" name="password" /><br />
<input type="file" name="file" /><br />
<input type="submit" />
</form>
</body>
2) input 태그의 type 속성값
HTML4 에서 지원
| 속성값 | 설명 |
| button | 버튼 생성 |
| checkbox | 체크박스 생성 |
| file | 파일 입력 양식 생성 |
| hidden | 보이지 않습니다 |
| image | 이미지 형태 생성 |
| password | 비밀번호 입력 양식 생성 |
| radio | 라디어 버튼 새성 |
| reset | 초기화 버튼 생성 |
| submit | 제출 버튼 생성 |
| text | 글라 입력 양식 생성 |
HTML5 에서 추가 지원
| 속성값 | 설명 |
| color | 색상 선택 양식 생성 |
| date | 일 선택 양식 생성 |
| datetime | 날짜 선택 양식 생성 |
| datetime-local | 지역 날짜 선택 양식 생성 |
| 이메일 입력 양식 생성 | |
| month | 월 선택 양식 생성 |
| number | 숫자 생성 양식 생성 |
| range | 범위선택 양식 생성 |
| search | 검색어 입력 양식 생성 |
| tel | 전화번호 입력 양식 생성 |
| time | 시간 선택 양식 생성 |
| url | URL 주소 입력 양식 생성 |
| week | 주 선택 양식 생성 |
3. textarea 태그
1) textarea 태그
여러 줄의 글자를 입력할 때 사용하는 태그
<body>
<form>
<textarea></textarea>
</form>
</body>
<body>
<form>
<textarea>Hello world!</textarea>
</form>
</body>
2) textarea 태그의 속성
| 속성 이름 | 설명 |
| cols | 태그의 너비를 지정 |
| rows | 태그의 높이를 지정 |
4. select 태그
여러 개의 목록에서 몇 가지를 선택할 수 있는 입력 양식 요소
1) 하나의 목록 선택
<body>
<form>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</form>
</body>
2) 여러 개의 목록 선택
Ctrl 키를 눌러 다중 선택 가능
<body>
<form>
<select multiple="multiple">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</form>
</body>
3) select 태그
| 태그 이름 | 설명 |
| select | 선택 양식을 생성 |
| optgroup | 옵션을 그룹화 |
| option | 옵션을 생성 |
4) optgroup 태그
<body>
<form>
<select>
<optgroup label="Group 1">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</optgroup>
<optgroup label="Group 2">
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
</optgroup>
</select>
</form>
</body>
5. fieldset 태그와 legend 태그
<body>
<form>
<fieldset>
<legend>Input</legend>
<input type="text" />
<input type="submit" />
</fieldset>
</form>
</body>
6. GET 요청과 POST 요청
1) GET 요청
<body>
<form method="get">
<input type="text" name="search" />
<input type="submit" />
</form>
</body>
- URL이 변경됨 (URL에 ?search=test 가 추가됨)
2) POST 요청
<body>
<form method="post">
<input type="text" name="search" />
<input type="submit" />
</form>
</body>
- URL이 변경되지 않음
POST 방식은 주소가 변경되지 않습니다. GET 방식과 달리 비밀스럽게 데이터를 전달하는 방식입니다. GET 방식은 주소에 데이터를 입력하므로 크기가 한정되어 있습니다. 하지만 POST 방식은 데이터 용량에 제한이 없습니다. [1] (79)
Reference
[1] 모던 웹을 위한 HTML5+CSS3 바이블, 윤인성 (2019), 한빛미디어
'Study > HTML & CSS' 카테고리의 다른 글
| [CSS] 스타일 속성 - 단위 (0) | 2022.10.26 |
|---|---|
| [CSS] 선택자 (Selector) (0) | 2022.10.24 |
| [HTML] CodePen (0) | 2022.10.06 |
| [CSS] 복합 선택자 (0) | 2022.10.03 |
| [CSS] Basic (0) | 2022.08.31 |
