HTML에 대한 기본문법을 복습하면서 만든 회원가입 양식이다.
배운것
- label 태그와 input은 각각 for과 id를 같게하여 이어준다
- radio 의 경우 하나의 문제에 대해 같은 name 정해야 중복 체크가 되지않는다.
- input 태그를 무조건 채우도록 하는 옵션은 required이다
- placeholder를 통해 부가설명이나 예시를 주자
- 비밀번호에 제약을 거는 여러가지 옵션이 있다 스택오버플로우 참고
- 비밀번호 실패시 멘트 설정(required title)
실행화면
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Register</title>
</head>
<body>
<h1>Register</h1>
<form action="">
<label for="first-name">First Name:</label>
<input name="first-name" id = "first-name" type="text" placeholder="John" required>
<label for="last-name">Last Name:</label>
<input name = "last-name" type="text" id="last-name" placeholder="Smith" required>
<br>
<label for="male">Male</label>
<input type="radio" name="sex" id="male">
<label for="female">Female</label>
<input type="radio" name="sex" id="female">
<label for="other">Other</label>
<input type="radio" name="sex" id="other">
<br>
<label for="email">Email:</label>
<input type="email" name="email" id="email" placeholder="your email" required>
<label for="password">Password:</label>
<!-- <input type="password" name="password" id="password" minlength="5" maxlength="10" required> -->
<input type="password" name="password" id="password" pattern=.{5,10} required title="=5이상 10이하의 문자를 입력하세연~!">
<br>
<label for="date">Birthday:</label>
<select name="date" id="month">Month
<option >Month</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>
<select name="date" id="day">
<option >Day</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>
<option >13</option>
<option value>14</option>
<option value>15</option>
<option value>16</option>
<option value>17</option>
<option value>18</option>
<option value>19</option>
<option value>20</option>
<option value>21</option>
<option value>22</option>
<option value>23</option>
<option value>24</option>
<option value>25</option>
<option value>26</option>
<option value>27</option>
<option value>28</option>
<option value>29</option>
<option value>30</option>
<option value>31</option>
</select>
<select name="date" id="year">
<option value="">Year</option>
<option value="">1990</option>
<option value="">1991</option>
<option value="">1992</option>
<option value="">1993</option>
<option value="">1994</option>
<option value="">1995</option>
<option value="">1996</option>
<option value="">1997</option>
<option value="">1998</option>
<option value="">1999</option>
<option value="">2000</option>
<option value="">2001</option>
<option value="">2002</option>
<option value="">2003</option>
<option value="">2004</option>
<option value="">2005</option>
<option value="">2006</option>
<option value="">2007</option>
<option value="">2008</option>
<option value="">2009</option>
<option value="">2010</option>
</select>
<br>
<label for="agree">I agree to the terms and conditions</label>
<input type="checkbox" name="agree" id="agree">
<br>
<button type="submit">submit</button>
</form>
</body>
</html>'IT > WEB' 카테고리의 다른 글
| [CSS]Box Model,실습 (1) | 2020.10.07 |
|---|---|
| [CSS] 셀렉터 기초 (1) | 2020.10.07 |
| JDBC 정리 및 실습 코드 (1) | 2020.05.22 |
| Maven 개념 (0) | 2020.05.22 |
| 데이터베이스 개념정리 (mysql) (1) | 2020.05.22 |
