#1 form 태그란?
The <form> HTML element represents a document section containing interactive controls for submitting information.
form 태그는 사용자로부터 필요한 데이터를 입력받기 위한 인터페이스 등을 구성요소로 갖는 태그이다. input태그를 form 태그 안에서 자주 사용한다.
#2 input 태그란?
The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user.
input 태그는 form태그에서 사용자로부터 데이터를 받기 위해 사용하는 태그다.
#3 input 태그 공통 속성
type
form 태그 안에 input태그를 넣고 input의 type속성을 지정하는 것이 기본 형식이다. form 태그와 달리 input태그는 스스로 닫히는 태그다. type속성으로 input의 종류를 결정할 수 있다.
<form>
<input type="text" />
</form>type의 값으로서 text, password, url, email, date, range, color 등이 있다. 각 값에 따라 input의 유형이 달라진다.
required
사용자가 필수로 입력해야하는 input 태그는 required 속성을 통해 강제할 수 있다.
<input type="text" required />#4 사용자로부터 데이터 받기
1) 텍스트: 사용자 성, 이름 등 받기
type=”text”로 input태그 설정 시 텍스트를 입력받을 수 있다. 사용자의 이름, 계정이름을 입력할 때 쓴다.
<input type="text" />필요한 경우 placeholder를 통해 어떤 값을 입력해야하는지 사용자에게 안내할 수 있다.
<input type="text" placeholder="username"/>2) password: 비밀번호 입력받기
사용자로부터 비밀번호를 받을 때 다음과 같이 쓴다. 텍스트와 같이 placeholder를 통해 어떤 내용을 넣는 지 사용자에게 안내할 수 있다.
<input type="password" placeholder="password"/>비밀번호의 최소 요구 글자수를 minlength를 통해 정할 수 있다.
<input type="password" placeholder="password" minlengh="10"/>3) url: url 입력하기
url을 입력할 수 있는 유형이다.
<input type="url" placeholder="Enter url."/>4) file: file 첨부하기
컴퓨터에서 파일을 입력할 수 있는 태그다. accept속성을 통해 파일의 유형도 지정할 수 있다.
<input type="file" id="profile" accept=".png,.pdf" />5) date: 날짜 입력하기
날짜를 입력할 수 있는 태그다.
<input type="date" />6) range: 범위 입력하기
범위를 입력할 수 있는 태그다.
<input type="range" />경우에 따라서는 범위에 눈금을 표현해야할 때가 있다. 이때 datalist태그와 option 태그를 활용한다. input태그와 datalist태그는 input태그의 list 속성과 datalist의 id 속성과 일치해야한다. 참고로 id는 고유식별자다. 눈금을 표시할 위치는 option에 value속성을 넣어 100을 기준으로 수를 넣는다.
<input type="range" list="markers" />
<datalist id="markers">
<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>7) color: 색 입력하기
색을 정해서 입력할 수 있는 태그다.
<input type="color" />8) submit: 제출하기
사용자가 받은 데이터를 제출하게 하는 속성이다. value 속성을 통해 요소 위에 데이터 제출과 관련 된 기능을 개발자가 직접 표현할 수 있다.
<input required type="submit" value="Create Account" />9) 참고: input 태그 라벨링하기
input태그를 label태그를 통해 라벨링할 수 있다. label 요소를 클릭하면 연결된 input 태그가 선택된다. label의 for 속성과 input의 id속성이 일치하면 연결된다.
<label for="first-name">First name</label>
<input required id="first-name" type="text" />#5 예제: 사용자로부터 이름, 이메일, 비밀번호, 생일 등 입력받기
이름, 이메일, 비빌번호, 생일, 현재 행복감, 좋아하는 색을 입력받는 form을 작성한 예제이다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kokoa Challenge</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
</head>
<body>
<form>
<div>
<label for="first-name">First name</label>
<input required id="first-name" type="text" />
</div>
<div>
<label for="last-name">Last name</label>
<input required id="last-name" type="text" />
</div>
<div>
<label for="email">Email</label>
<input required id="email" type="email" />
</div>
<div>
<label for="username">Username</label>
<input required id="username" type="text" />
</div>
<div>
<label for="password">Password</label>
<input type="password" minlength="10" />
</div>
<div>
<label for="birth-day">Birth day</label>
<input required id="birth-day" type="date" />
</div>
<div>
<label for="happy">How happy are you?</label>
<input id="happy" type="range" list="markers" />
<datalist id="markers">
<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="fav-color">What is your fav.color?</label>
<input id="fav-color" type="color" />
</div>
<div>
<input required type="submit" value="Create Account" />
</div>
</form>
</body>
</html>