728x90
반응형
ㄱ.입력 양식 개요
a. 기본
<body>
<form>
<input type="text" name="search">
<input type="submit">
</form>
</body>
b.전송방식 (get, post)
get : url이 '파일이름?search=' 로 전달. 크기에 제한이 있음
post : 데이터를 별도로 전송하기 때문에 데이터 용량에 제한이 없음
<body>
<!-- get 전송 방식 -->
<form method="get">
<input type="text" name="search">
<input type="submit">
</form>
<!-- post 전송 방식 -->
<form method="post">
<input type="text" name="search">
<input type="submit">
</form>
</body>
ㄴ.입력 양식 종류
| 태그 종류 | ||
| 태그 | 속성 | 설명 |
| form | 보이지않음 | 입력양식의 시작과 끝 표시 |
| input | text | 글자 입력 양식 |
| button | 버튼 | |
| checkbox | 체크박스 | |
| file | 파일 입력 양식 | |
| hidden | 내용 표시 안함 | |
| image | 이미지 형태 생성 | |
| password | 비밀번호 입력 양식 | |
| radio | 라디오 버튼 | |
| reset | 초기화 버튼 | |
| submit | 제출버튼 | |
| textarea | cols/rows | 여러행 글자 입력양식 cols = 너비, rows = 높이 |
| select optgroup option |
선택양식 생성 옵션 그룹화 옵션생성 |
|
| fieldset legend |
입력양식 그룹지정 입력양식 그룹의 이름 지정 |
|
a.기본입력 양식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<!-- 사용자가 입력하는 입력 양식 -->
<input type="text" name="text" value="text"><br>
<input type="password" name="password" value="password"><br>
<input type="file" name="file" value="file"><br>
<input type="checkbox" name="checkbox" value="checkbox"><br>
<input type="radio" name="radio" value="radio"><br>
<!-- 보이지 않는 입력 양식 -->
<input type="hidden" name="hidden" value="hidden"><br>
<!-- 버튼 -->
<input type="button" value="button"><br>
<input type="reset" value="reset"><br>
<input type="submit" value="submit"><br>
<input type="image" src="http://placehold.it/100x100">
</form>
</body>
</html>
b. label 태그
: label 의 for와 input의 id를 같게 지정
<form>
<label for="name">이름</label>
<input type="text" id="name">
</form>
c. 간단한 입력 양식
<body>
<form>
<table>
<tr>
<td><label for="username">이름</label></td>
<td><input type="text" id="username" name="username"></td>
</tr>
<tr>
<td>성별</td>
<td>
<input type="radio" id="man" name="gender" value="m">
<label for="man">남자</label>
<input type="radio" id="woman" name="gender" value="w">
<label for="woman">남자</label>
</td>
</tr>
</table>
<input type="submit" value="가입">
</form>
</body>
d. 선택 입력 양식
: 한 항목만 선택
<body>
<select>
<option>수성</option>
<option>금성</option>
<option>지구</option>
<option>화성</option>
<option>목성</option>
<option>토성</option>
<option>천왕성</option>
<option>해왕성</option>
</select>
</body>
: 여러 항목 선택
- multiple
<body>
<select multiple="multiple">
<option>수성</option>
<option>금성</option>
<option>지구</option>
<option>화성</option>
<option>목성</option>
<option>토성</option>
<option>천왕성</option>
<option>해왕성</option>
</select>
</body>
: 선택 옵션 묶기
- optgroup
<body>
<select>
<optgroup label="지구형행성">
<option>수성</option>
<option>금성</option>
<option>지구</option>
<option>화성</option>
</optgroup>
<optgroup label="목성형 행성">
<option>목성</option>
<option>토성</option>
<option>천왕성</option>
<option>해왕성</option>
</optgroup>
</select>
</body>
728x90
반응형
'HTML／CSS／JS' 카테고리의 다른 글
| [HTML5] 07. 반응/상태 선택자 (:hover, :active, :focus, :enabled, :disabled) (0) | 2022.10.17 |
|---|---|
| [HTML5] 06. div, span, 시맨틱태그 (0) | 2022.10.17 |
| [HTML5] 04.미디어 태그 (img,src,audio,video) (0) | 2022.10.13 |
| [HTML5] 03.테이블 태그 (table,tr,th,td,colspan,rowspan) (0) | 2022.10.13 |
| [HTML5] 02.목록태그 (list,ul,ol,li) (0) | 2022.10.13 |
