<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<style>
h1{
text-decoration: underline;
text-underline-offset: 5px;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
div{
margin: 10px;
}
input:valid + span::before{
content: "OK";
color: green;
}
button{
width: 200px;
padding: 5px;
border-radius: 10px;
font-size: 1rem;
}
#cabutton{
margin: 50px;
text-align:center;
}
</style>
</head>
<body>
<form>
<div>
<h1>Create an Account</h1>
</div>
<div>
<label for="firstname" >First name</label>
<input type="text" placeholder="First name" id="firstname" required>
<span></span>
</div>
<div>
<label for="lastname">Last name</label>
<input type="text" placeholder="Last name" id="lastname" required>
<span></span>
</div>
<div>
<label for="email">Email</label>
<input type="email" placeholder="Email" id="email" required>
<span></span>
</div>
<div>
<label for="username">Username</label>
<input type="text" placeholder="Username" id="username" required>
<span></span>
</div>
<div>
<label for="password">Password</label>
<input type="password" placeholder="Password" id="password" minlength="10" required>
<span></span>
</div>
<div>
<label for="bdate">Birth date</label>
<input type="date" id="bdate" required>
</div>
<div>
<label>How happy are you?</label>
<input type="range" list="tickmarks" id="happiess">
<datalist id="tickmarks">
<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="fcolor">What is your fav. color?</label>
<input type="color" id="fcolor">
</div>
<div id="cabutton">
<button> Create Account </button>
</div>
</form>
</body>
</html><!메타 속성 잘모름>
<!줄삽입 어떻게? div border-top 안되나>
<!버튼 왜 가운데로 안와?>
<!특수문자입력? valid는 조건아님?>
<! h1 div에 넣어도 정렬안되서 form에 넣음. 왜 정렬안됨?>
<! .들어가는 조건은 어디서?>
<!한글자씩보이는건 어떻게하나?
required일괄적용안되나?>
<!년월일은 브라우저탓인가?>
<!마커는 그림뿐, 틱조절은 어떻게?>
<! div에 넣어도 생각처럼 안움직임.
input버튼이랑 뭔차이?>
