JunO3O
입력 양식 종류
입력 양식 종류
2023. 3. 21. 03:01ㆍHTML
입력 양식 태그
| 태그 | 속성 | 설명 |
| form | 보이지 않음 | 입력 양식의 시작과 끝 표시 |
| input | text | 글자 입략 양식 생성 |
| button | 버튼 생성 | |
| checkbox | 체크 박스 생성 | |
| file | 파일 입력 양식 생성 | |
| hidden | 해당 내용 표시 안함 | |
| image | 이미지 형태 생성 | |
| password | 비밀번호 입력 양식 생성 | |
| radio | 라디오 버튼 생성 | |
| reset | 초기화 버튼 생성 | |
| submit | 제출 버튼 생성 | |
| textarea | cols / rows | 여러 행의 글자 입력 양식 생성, cols는 너비를 지정하고, rows는 높이를 지정 |
| select optgroup option |
- | 선택 양식 생성 옵션 그룹화 옵션 생성 |
| fieldset legend |
- | 입력 양식의 그룹 지정 입력 양식 그룹의 이름 지정 |
<!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>
<!-- 사용자가 직접 입력하는 form -->
<input type="text" name="text" value="text"> <br><br>
<input type="password" name="password" value="password"> <br><br>
<input type="file" name="file" value="file"> <br><br>
<input type="checkbox" name="checkbox" value="checkbox"> <br><br>
<input type="radio" name="radio" value="radio"> <br><br>
<!-- 보이지 않는 입력 form -->
<input type="hidden" name="hidden" value="hidden"> <br><br>
<!-- 버튼 -->
<input type="button" value="button"> <br><br>
<input type="reset" value="reset"> <br><br>
<input type="submit" value="sumbit"> <br><br>
<input type="image" src="abc.jpg" width="300">
</form>
</body>
</html>
# 라디오 버튼 선택
ㅁ 라디오 버튼의 name 속성을 사용하면 여러 대상 중 하나만 선택하는 형태를 만들 수 있습니다.
<!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>
<table>
<tr>
<td> <label for="username"> 이름 </label></td>
</tr>
<tr>
<td> 성별 </td>
<td>
<input id="man" type="radio" name="gender" value="m">
<label for="man"> 남자 </label>
<input id="woman" type="radio" name="gender" value="w">
<label for="woman"> 여자 </label>
</td>
</tr>
</table>
<input type="submit" value="가입">
</form>
</body>
</html>
# 선택 가능한 입력 양식
ㅁ select 태그는 목록으로 보여주는 항목 중 하나 또는 여러 개를 선택할 때 사용하는 입력 양식 요소입니다.
<!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>
<select>
<option> 빨강 </option>
<option> 파랑 </option>
<option> 초록 </option>
<option> 흰색 </option>
<option> 검정 </option>
</select>
</body>
</html>
# 여러 항목 선택하기
ㅁ select 태그의 multiple 속성을 사용하면 여러 항목을 선택할 수 있습니다.
<!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>
<select multiple="multiple">
<option> 짜장 </option>
<option> 짬뽕 </option>
<option> 탕수육 </option>
<option> 고추잡채 </option>
<option> 샥스핀 </option>
</select>
</body>
</html>
ㄴ> multiple 속성은 데스크톱에서 사용하면 위와 같이 나오기 때문에 잘 사용하지 않는다.
ㄴ> 스마트폰에서는 선택할 수 있게 나오긴 하지만 이쁘진 않다.
# 선택 옵션 묶기
ㅁ optgroup 태그를 사용해 선택 옵션을 그룹으로 묶을 수 있습니다.
<!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>
<select>
<optgroup label="과일">
<option> 수박 </option>
<option> 오렌지 </option>
<option> 사과 </option>
</optgroup>
<optgroup label="채소">
<option> 미나리 </option>
<option> 상추 </option>
</optgroup>
</select>
</body>
</html>
# 연관 있는 입력 양식을 그룹으로 묶기
ㅁ fieldset 태그와 legend 태그를 사용하면 입력 양식을 그룹으로 묶고 이름을 지정할 수 있습니다.
ㅁ legend 태그는 fieldset 태그 내부에 사용합니다.
<!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>
<fieldset>
<legend> 입력 양식 </legend>
<table>
<tr>
<td> <label for="name"> 이름 </label></td>
<td> <input id="name" type="text"> </Td>
</tr>
<tr>
<td> <label for="phone"> 핸드폰 번호 </label></td>
<td> <input id="phone" type="text"> </Td>
</tr>
</table>
<input type="submit">
</fieldset>
</form>
</body>
</html>
