1) input tag in form tag
- input tag는 form tag 안에 위치시켜야지 데이터를 주고 받는 인터랙티브가 가능하다.
2) label tag & input tag
a. advantages
- programmatical association
- label 클릭시 input 입력으로 넘어간다.
b. 연결 방법
- input id 값 = label for 값
3) attributes 중 name
- Name of the form control. 입력되는 내용이 어떤 목적의 내용인지를 기입한다. 예를 들어 email 입력창을 클릭하면 자동적으로 내가 저장한 email 주소가 뜨는 것도, 여기에 기입될 정보가 어떤 내용인지 name을 통해 저장하기 때문이다.
<body>
<h1>Create An Account_Yoon</h1>
<form>
<div>
<label for="firstName">First name</label>
<input type="text" name="firstName" id="firstName" required placeholder="First name">
</div>
<div>
<label for="lastName">Last name</label>
<input type="text" name="lastName" id="lastName" required placeholder="Last name">
</div>
<div>
<label for="email">Email</label>
<input type="text" name="email", id="email" required placeholder="Email">
</div>
<div>
<label for="userName">Username</label>
<input type="text" name="userName" id="userName" required placeholder="Username">
</div>
<div>
<label for="password">Password</label>
<input type="text" name="password" id="password" required placeholder="Password" minlength="10">
</div>
<div>
<label for="birthDate">Birth date</label>
<input type="date" name="birthDate" id="birthDate" required>
</div>
<div>
<label for="happyRange">How happy are you?</label>
<input type="range" name="happyRange" id="happyRange" list="tickmarks" required>
<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="favColor">What is your fav. color?</label>
<input type="color" name="favColor" id="favColor" required>
</div>
<div id="createAccountBtn">
<input type="submit" value="Create Account">
</div>
</form>
</body>
프론트엔드 개발자를 목표로 하는 전 미술기획자