09009
[HTML] 입력 양식 태그 본문
입력 양식 태그
- 입력 양식 : 우선 form 태그로 영역을 생성하고 내부에 input 태그를 작성한다.
입력 양식 종류
input 태그 : 사용자로부터 정보를 받아들이는 용도로 사용됨
input 태그의 type 속성을 이용하여 입력 양식을 여러 종류로 변경하여 사용한다.
type : 입력 태그의 유형 설정
name : 서버로 전달되는 이름 설정 (사용자 임의 지정)
value : 입력 태그의 초기값 설정 (사용자가 변경 가능)
💻 출력
✍ 입력
<!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>
label 태그
- input 태그를 설명할 때 사용하는 태그이다.
- label 태그는 for 속성에 input 태그의 id 속성을 입력하여 label 태그가 어떤 input 태그를 나타내는지 알려주는 역할을 한다.
- for 속성을 연결하면 label 태그를 클릭하였을 때 input 태그에 자동으로 포커스가 간다.
밑의 예시에서 이름을 클릭하면 사용자가 바로 입력할 수 있게 커서가 나타난다.
체크 박스와 라디오 버튼 등은 label을 클릭하였을 때 해당 항목이 체크된다.
간단한 입력 양식 생성
- 라디오 버튼의 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>
<td><input id="username" type="text" name="username"></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>
! radio 버튼은 name 속성을 같게 입력해주어야 여러 항목 중 하나만 선택할 수 있게 설정된다. !
선택 가능한 입력 양식
- select : 목록으로 보여주는 항목 중에서 하나 또는 여러 개를 선택할 때 사용
- option : 선택할 수 있는 요소 생성
select 태그 내부에 option 태그를 넣으면 옵션을 선택할 수 있는 요소가 생성된다.
한 항목만 선택하기 - select, option
💻 출력
✍ 입력
<body>
<select>
<option>김밥</option>
<option>떡볶이</option>
<option>순대</option>
<option>어묵</option>
</select>
</body>한 항목만 선택하는 대신 여러 항목을 선택하고 싶다면 select 태그의 multiple 속성을 사용한다.
여러 항목 선택하기 - multiple
- multiple :여러 항목을 선택할 때 사용하는 select 태그의 속성
💻 출력
✍ 입력
<body>
<select multiple="multiple">
<option>김밥</option>
<option>떡볶이</option>
<option>순대</option>
<option>어묵</option>
</select>
</body>
선택 옵션 묶기 - optgroup
- 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="HTML5">
<option>Multimedia Tag</option>
<option>Connectivity</option>
<option>Device Access</option>
</optgroup>
<optgroup label="CSS3">
<option>Animation</option>
<option>3D Transform</option>
</optgroup>
</select>
</body>
</html>Fieldset 태그
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="mail">이메일</label></td>
<td><input id="mail" type="text"></td>
</tr>
</table>
<input type="submit">
</fieldset>
</form>
</body>
</html>실습 예제
💻 출력
✍ 입력
<!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>
<th><label for="name">아이디</label></th>
<td><input id="name" type="text"></td>
</tr>
<tr>
<th><label for="password">비밀번호</label></th>
<td><input id="password" type="text"></td>
</tr>
<tr>
<td></td>
<td><input type="submit"></td>
</tr>
</table>
</form>
</body>
</html><!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 action="">
<table>
<tr>
<th>아이디</th>
<td><input type="text"></td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="password"></td>
</tr>
<tr>
<td></td>
<td><input type="submit"></td>
</tr>
</table>
</form>
</body>
</html>💻 출력
✍ 입력
<!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 action="">
<b>시작 그룹</b><br>
<input type="radio">새 탭 페이지 열기 <br>
<input type="radio"> 중단한 위치에서 계속하기 <br>
<input type="radio"> 특정 페이지 또는 페이지 모음 열기 <br>
<br>
<b>개인정보 및 보안</b><br>
<input type="checkbox">동기화 및 서비스 <br>
<input type="checkbox">로그인 허용 <br>
<input type="checkbox">페이지 미리 로드 <br>
</form>
</body>
</html><b></b> 태그는 글자를 굵게 표시함.
💻 출력
✍ 입력
<body>
<h1>글 작성하기</h1>
<form action="">
<table>
<tr>
<th>작성자</th>
<td><input type="text"></td>
</tr>
<tr>
<th>아이디</th>
<td><input type="text"></td>
</tr>
<tr>
<th>이메일</th>
<td><input type="text">@<input type="text"></td>
</tr>
<tr>
<th>휴대폰</th>
<td> <select> <option>010</option></select> - <input type="text"> - <input type="text"> </td>
</tr>
<tr>
<th>글제목</th>
<td><input type="text"></td>
</tr>
<tr>
<th>내용</th>
<td><textarea name="" id="" cols="30" rows="10"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit"></td>
</tr>
</table>
</form>
</body><!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>
<h1>글 작성하기</h1>
<form action="">
<table>
<tr>
<th><label for="user">작성자</label></th>
<td><input type="text" id="user"></td>
</tr>
<tr>
<th><label for="id">아이디</label></th>
<td><input type="text" id="id"></td>
</tr>
<tr>
<th><label for="email">이메일</label></th>
<td><input type="text" id="email"> @ <input type="text" id="email"></td>
</tr>
<tr>
<th><label for="phone">휴대폰</label></th>
<td><select name="" id=""><option value="">010</option></select>
- <input type="text" id="phone"> - <input type="text" id="phone"></td>
</tr>
<tr>
<th><label for="title">글제목</label></th>
<td><input type="text" id="title"></td>
</tr>
<tr>
<th><label for="detail">내용</label></th>
<td><textarea name="" id="" cols="30" rows="10"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit"></td>
</tr>
</table>
</form>
</body>
</html>
'Front-End > HTML' 카테고리의 다른 글
| [HTML] 시맨틱 태그 (0) | 2023.04.08 |
|---|---|
| [HTML] 공간 분할 태그 - div, span (0) | 2023.03.29 |
| [HTML] 테이블 태그 (0) | 2023.03.29 |
| [HTML] 글자, 목록 태그 (0) | 2023.03.28 |
| [HTML] HTML 작성 및 실행 (0) | 2023.03.28 |
Comments