<!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>
<label for="firstname">First name <input type="text" id="firstname" required="required"/></label><br />
<label for="lastname">Last name <input type="text" id="lastname" required="required"/></label><br />
<label for="usermail">E-mail <input type="email" id="usermail" required="required" /></label><br />
<label for="username">Username <input type="text" id="username" required="required" /></label><br />
<label for="password">Password <input type="password" id="password" required="required" minlength="10"/></label><br />
<label for="birthdate">Birth date <input type="date" id="birthdate" required="required" /></label><br />
<label for="happy">How happy are you? <input type="range" id="happy"required="required" /></label><br />
<label for="favcolor">What is your fav.color? <input type="color" id="favcolor"required="required" /></label><br />
<input type="submit" value="Create Account" />
</form>
</body>
</html>아직 블로그 쓰는게 예쁘지도 않고 어색하고 낯설지만..
꾸준함은 배신하지 않는다 화이팅!!
해설
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>SuperForm</title>
</head>
<body>
<h2>Create An Account</h2>
<form>
<div>
<label for="first-name">First name</label>
<input required id="first-name" type="text" placeholder="First name" />
</div>
<div>
<label for="last-name">Last name</label>
<input required id="last-name" type="text" placeholder="Last name" />
</div>
<div>
<label for="email">Email</label>
<input required id="email" type="email" placeholder="Email" />
</div>
<div>
<label for="username">Username</label>
<input required id="username" type="text" minlength="5" placeholder="Username" />
</div>
<div>
<label for="password">Password</label>
<input required id="password" type="password" minlength="10" placeholder="Password" />
</div>
<div>
<label for="birth-date">Birth date</label>
<input required id="birth-date" type="date" />
</div>
<div>
<label for="kimchi-love">How happy are you?</label>
<input required id="kimchi-love" type="range" list="kimchi-levels" />
<datalist id="kimchi-levels">
<option value="0"></option>
<option value="10"></option>
<option value="20"></option>
<option value="30"></option>
<option value="40"></option>
<option value="50"></option>
<option value="60"></option>
<option value="70"></option>
<option value="80"></option>
<option value="90"></option>
<option value="100"></option>
</datalist>
</div>
<div>
<label for="fa-color">What is your fav. color?</label>
<input required id="fa-color" type="color" />
</div>
<div>
<input type="submit" value="Create Account" />
</div>
</form>
</body>
</html>
💻