프론트엔드
HTML form 태그
김씨 학생
2024. 1. 19. 15:22
form 태그
form 태그
웹 페이지 내에서 사용자로부터 입력을 받을 때 사용하는 태그 사용자가 입력한 데이터를 다른 페이지로 전송할 때 form 태그를 사용한다.
<form action="" method="" name="">
입력 태그
입력 태그
입력 태그
. . .
</form>
form 태그 속성 종류
| action | 데이터를 전송할 페이지의 경로(생략 시 현재 페이지) |
| method | 데이터를 전송하는 방식(생략 시 get방식) |
| name | form 태그의 이름을 설정(생략 시 이름 없음) |
Input 태그
입력 받기 위해 사용되는 태그, 데이터를 지정하여 전달할 때 사용하는 태그
<input type="">
Input 태그 속성 종류
| type | 입력 종류를 설정 |
| name | value의 key값 |
| value | 사용자가 입력한 값(입력 전에 미리 값을 넣어줄 수 있다). |
| placeholder | 값은 아니지만 미리 출력해줄 문구를 작성할 수 있다. |
| readonly | 수정할 수 없도록 하는 설정 |
| required | 필수 항목 |
| maxlength | 글자 수 제한 |
Input 태그의 type 종류
자주 사용되는 것들:
| text | 텍스트 입력(작성한 텍스트가 눈으로 보임) |
| password | 텍스트 입력(작성한 텍스트가 눈으로 안보임) |
| radio | 여러 개 중 하나의 옵션만 선택 가능 |
| checkbox | 여러 개 중 다수의 옵션 선택 가능 |
| file | 파일 전송(첨부파일 업로드) |
| button, submit, reset | 버튼, 전송, 초기화 |
그 외:
| color | 색상 선택 |
| 이메일 입력(골뱅이 포함 입력) | |
| url | http://로 입력 |
| tel | 핸드폰 번호 입력 |
| date | 날짜 입력(브라우저 별로 캘린더의 스타일은 다를 수 있다) |
| number, min, max, step | 숫자 입력 |
| range | 일정 범위 안의 값만 입력 |
| search | 검색어를 입력 |
Label 태그
input type이 radio는 입력을 받을 수 있는 '원'만 의미한다. 그러나 그 뒤에 있는 텍스트들은 input 요소로 취급하지 않아 텍스트를 눌러도 선택되지 않는다.
이를 해결하기 위해 Label 태그를 사용하면 텍스트를 클릭해도 해당 Input이 선택된다.
<label>
<input type="radio" name="gender" value="선택안함"> 선택안함
</label>
<label>
<input type="radio" name="gender" value="여자"> 여자
</label>
<!-- 원하는 input태그의 id값을 for에 작성하면 멀리 있어도 반응한다. -->
<label for="gender">
남자
</label>
<input type="radio" name="gender" id="gender" value="남자">
label은 for속성과 함께 사용될 수 있는데 이는 input이 여는 태그와 닫는 태그 사이에 없고 밖에 있을 경우 for에 input ID값을 넣어 연결할 수 있다.
사용 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form 태그와 input 태그</title>
</head>
<body>
<form>
<input type="text" placeholder="아이디를 입력해주세요." name="user-id" required autocomplete="none">
<input type="password" placeholder="비밀번호를 입력해주세요." name="user-password">
<fieldset>
<legend>성별</legend>
<label>
<input type="radio" name="gender" value="선택안함"> 선택안함
</label>
<label>
<input type="radio" name="gender" value="여자"> 여자
</label>
<!-- 원하는 input태그의 id값을 for에 작성하면 멀리 있어도 반응한다. -->
<label for="gender">
남자
</label>
<input type="radio" name="gender" id="gender" value="남자">
</fieldset>
<fieldset>
<legend>취미</legend>
<label><input type="checkbox" name="hobby" value="영화감상"> 영화감상</label>
<label><input type="checkbox" name="hobby" value="골프"> 골프</label>
<label><input type="checkbox" name="hobby" value="볼링"> 볼링</label>
<label><input type="checkbox" name="hobby" value="기타"> 기타</label>
<label><input type="checkbox" name="hobby" value="테니스"> 테니스</label>
<label><input type="checkbox" name="hobby" value="산책"> 산책</label>
<label><input type="checkbox" name="hobby" value="연애"> 연애</label>
<label><input type="checkbox" name="hobby" value="게임"> 게임</label>
<label><input type="checkbox" name="hobby" value="등산"> 등산</label>
<label><input type="checkbox" name="hobby" value="축구"> 축구</label>
<label><input type="checkbox" name="hobby" value="노래"> 노래</label>
</fieldset>
<p>
<input type="date">
</p>
<p>
<input type="datetime-local">
</p>
<p>
<select name="major">
<option value="computer">컴퓨터공학과</option>
<option value="model">모델학과</option>
<option value="nurse">간호학과</option>
<option value="music">실용음악과</option>
<option value="mechanic">기계공학과</option>
<option value="messcom">신문방송학과</option>
<option value="management">경영학과</option>
</select>
</p>
<p>
<textarea cols="30" rows="3">상품명:</textarea>
</p>
<label for="file">
<img src="add.png">
</label>
<input type="file" id="file" style="display: none">
<p>
<input type="submit" value="완료">
</p>
</form>
</body>
</html>