폼
- 사용자의 입력을 수집하여 서버에서 처리함
- <form [속성 = "속성값"]> 폼 요소 </form>
폼의 속성
- Action: 사용자가 submit 버튼을 클릭하면 양식 데이터가 서버의 파일로 전송됨
<!DOCTYPE html>
<html lang="ko">
<head>
<title>폼(Form)의 개념</title>
</head>
<body>
<form action="https://www.w3schools.com/action_page.php">
<label for="국적">국적:</label><br>
<input type="text" id="국적" name="국적"><br>
<label for="이름">이름:</label><br>
<input type="text" id="이름" name="성"><br><br>
<input type="submit" value="실행">
</form>
</body>
</html>
- Method: 폼 데이터를 제출할 때 HTTP 메서드가 사용되도록 지정
- URL 변수: 사용 method = "get"
- HTTP 포스트 트랜잭션: 사용 method = "post"
- 양식 데이터를 제출할 때 기본 HTTP 메서드는 GET
| GET |
POST |
| 주소에 데이터를 직접 입력해서 전달 |
별도의 방법을 사용해 데이터를 해당 주소로 전달 |
| GET을 사용하여 민감한 데이터를 보내지 않도록 함 |
제출된 양식 데이터는 URL에 표시되지 않음 |
| URL 길이가 제한됨 (2048자) |
POST는 크기 제한이 없으며 많은 양의 데이터를 보내는 데 사용 |
| 사용자가 결과를 책갈피로 지정하려는 양식 제출에 유용 |
POST가 포함된 양식 제출은 책갈피로 지정할 수 없음 |
| 비보안 데이터에 유용 |
|
<form action="https://www.w3schools.com/action_page.php" target="_blank" method="get">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form><br><hr>
<form action="https://www.w3schools.com/action_page.php" target="_blank" method="post">
<label for="birth">Birth:</label><br>
<input type="text" id="birth" name="birth" value="991231"><br>
<input type="submit" value="Submit">
</form>
폼의 요소
Label
- 여러 가지 형태의 이름을 정의
- 스크린 리더 사용자에게 유용
- 사용자가 입력 요소에 초점을 맞추면 스크린 리더가 레이블을 소리내어 읽어줌
- 라디오 버튼이나 체크 박스 등의 매우 작은 영역을 클릭하는 데 어려움을 겪는 사용자에게 도움이 됨
- 레이블 요소 내의 텍스트를 클릭하면 버튼이 토글되기 때문
- 태그의 for 속성은 label 태그를 묶는 요소의 id 속성과 같아야 함
Fieldset & Legend
- Fieldset: 입력 양식의 그룹 지정
- Legend: 입력 양식 그룹의 이름 지정
<!DOCTYPE html>
<html lang="ko">
<head>
<title>fieldset, label, legend</title>
</head>
<body>
<form action="https://www.w3schools.com/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
Select & Option
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Select & Option</title>
</head>
<body>
<h2>Select & Option</h2>
<p>The select element defines a drop-down list:</p>
<form action="https://www.w3schools.com/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</body>
</html>
Textarea
<!DOCTYPE html>
<html lang="ko">
<head>
<title>TextArea</title>
</head>
<body>
<h2>TextArea</h2>
<p>여러 행의 글자 입력 양식 생성.</p>
<form action="https://www.w3schools.com/action_page.php">
<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
<br><br>
<input type="submit">
</form>
</body>
</html>
입력(Input) 태그
- text: 글자 입력 양식 생성
- button: 버튼 생성
- checkbox: 체크박스 생성
- file: 파일 입력 양식 생성
- hidden: 해당 내용 표시 안함
- password: 비밀번호 입력 양식 생성
- radio: 라디오 버튼 생성 (원형, 여러 개 중 1개 선택)
- reset & submit: 초기화 버튼과 제출 버튼 생성
- date: 날짜 입력 양식 생성
- time: 시간 입력 양식 생성
- color: 색상 입력 양식 생성
- range: 범위 입력 양식 생성
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebPage Prototype - 네이버 회원가입 폼</title>
<link rel="icon" href="images/NaverIcon.png">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="member">
<img src="images/NaverLogo.png" class="logo">
<div class="field">
<b>아이디</b>
<span class="placehold-text"><input type="text"></span>
</div>
<div class="field">
<b>비밀번호</b>
<input class="pw1" type="password">
</div>
<div class="field">
<b>비밀번호 재확인</b>
<input class="pw2" type="password">
</div>
<div class="field">
<b>이름</b>
<input type="text">
</div>
<div class="field birth">
<b>생년월일</b>
<div>
<input type="number" placeholder="년(4자)">
<select>
<option value="">월</option>
<option value="">1월</option>
<option value="">2월</option>
<option value="">3월</option>
<option value="">4월</option>
<option value="">5월</option>
<option value="">6월</option>
<option value="">7월</option>
<option value="">8월</option>
<option value="">9월</option>
<option value="">10월</option>
<option value="">11월</option>
<option value="">12월</option>
</select>
<input type="number" placeholder="일">
</div>
</div>
<div class="field gender">
<select id="gender" name="gender" class="sel" aria-label="성별">
<option value="" selected>성별</option>
<option value="M">남자</option>
<option value="F">여자</option>
<option value="U">선택 안함</option>
</select>
</div>
<div class="field">
<b>본인 확인 이메일<small>(선택)</small></b>
<input type="email" placeholder="선택입력">
</div>
<div class="field tel-number">
<b>휴대전화</b>
<select>
<option value="">대한민국 +82</option>
<option value="1">미국/캐나다 +1</option>
<option value="81">일본 +81</option>
<option value="86">중국 +86</option>
<option value="886">타이완 +886</option>
</select>
<div>
<input type="tel" placeholder="전화번호 입력">
<input type="button" value="인증번호 받기">
</div>
<input type="number" placeholder="인증번호 입력하세요">
</div>
<input type="submit" value="가입하기">
</div>
</div>
</body>
</html>
