<html>
<head>
<meta charset="utf-8">
<title>회원가입</title>
<meta name="keyword" content="회원가입,html">
</head>
<body>
<h1>회원가입</h1>
<hr/>
<form action="" method="GET">
<fieldset>
<legend>계정 정보</legend>
<div>
<label for="id-account">아이디<label>
<input type="text" name="account" id="id-account">
</div>
<div>
<label for="id-password">패스워드<label>
<input type="password" name="password" id="id-password">
</div>
<div>
<label for="id-password2">패스워드 확인<label>
<input type="password" name="password2" id="id-password2">
</div>
</fieldset>
<fieldset>
<legend>프로필</legend>
<div>
<label for="id-name">이름</label>
<input type="text" name="name" id="id-name">
</div>
<div>
<label>생년월일</label>
<input type="number" name="birth-year" placeholder="년" min="1900" max="2024">
<select name="birth-month">
<option>월</option>
<option value="1">1월</option>
<option value="2">2월</option>
<option value="3">3월</option>
<option value="4">4월</option>
<option value="5">5월</option>
<option value="6">6월</option>
<option value="7">7월</option>
<option value="8">8월</option>
<option value="9">9월</option>
<option value="10">10월</option>
<option value="11">11월</option>
<option value="12">12월</option>
</select>
<input type="number" name="birth-day" placeholder="일" min="1" max="31">
</div>
<div>
<label>성별</label>
<input type="radio" name="gender" id="id-gender-male"/>
<label for="id-gender-male">남</label>
<input type="radio" name="gender" id="id-gender-female"/>
<label for="id-gender-female">여</label>
</div>
</fieldset>
<div>
<input type="checkbox" name="agree" id="id-agree"/>
<label for="id-agree">사이트 이용약관과 개인정보 수집 방침에 동의합니다.</label>
</div>
<input type="submit" value="가입하기"/>
</form>
</body>
</html>
=>GET 방식을 사용해서
아이디, 패스워드를 입력하면 URL에 정보가 뜬다
signup.html?account=abc&password=123&password2=123&name=홍길동&...
<input에 required="required"추가>
<html>
<head>
<meta charset="utf-8">
<title>회원가입</title>
<meta name="keyword" content="회원가입,html">
</head>
<body>
<h1>회원가입</h1>
<hr/>
<form action="" method="GET">
<fieldset>
<legend>계정 정보</legend>
<div>
<label for="id-account">아이디<label>
<input type="text" name="account" id="id-account" required="required">
</div>
<div>
<label for="id-password">패스워드<label>
<input type="password" name="password" id="id-password" required="required">
</div>
<div>
<label for="id-password2">패스워드 확인<label>
<input type="password" name="password2" id="id-password2" required="required">
</div>
</fieldset>
<fieldset>
<legend>프로필</legend>
<div>
<label for="id-name">이름</label>
<input type="text" name="name" id="id-name" required="required">
</div>
<div>
<label>생년월일</label>
<input type="number" name="birth-year" placeholder="년" min="1900" max="2024" required="required">
<select name="birth-month">
<option>월</option>
<option value="1">1월</option>
<option value="2">2월</option>
<option value="3">3월</option>
<option value="4">4월</option>
<option value="5">5월</option>
<option value="6">6월</option>
<option value="7">7월</option>
<option value="8">8월</option>
<option value="9">9월</option>
<option value="10">10월</option>
<option value="11">11월</option>
<option value="12">12월</option>
</select>
<input type="number" name="birth-day" placeholder="일" min="1" max="31" required="required">
</div>
<div>
<label>성별</label>
<input type="radio" name="gender" id="id-gender-male" required="required"/>
<label for="id-gender-male">남</label>
<input type="radio" name="gender" id="id-gender-female" required="required"/>
<label for="id-gender-female">여</label>
</div>
</fieldset>
<div>
<input type="checkbox" name="agree" id="id-agree" required="required"/>
<label for="id-agree">사이트 이용약관과 개인정보 수집 방침에 동의합니다.</label>
</div>
<input type="submit" value="가입하기"/>
</form>
</body>
</html>
required쓰면 이런식으로 입력값을 검증해준다.
<method="POST">
method를 POST방식으로 바꾸면 URL에 입력한 정보가 표시되지 않는다
Form Data에서 확인할 수 있음.
'웹 프로그래밍 > HTML+CSS' 카테고리의 다른 글
| 반응형 웹 사이트 만들기 (1) | 2024.11.16 |
|---|---|
| 가변 그리드 레이아웃 (3) | 2024.11.16 |
| 반응형 웹 (0) | 2024.11.15 |
| 가상 클래스와 가상 요소 (1) | 2024.11.15 |
| 시맨틱 태그가 사용된 HTML5 문서 (1) | 2024.11.14 |