[HTML] 폼

다음과 같은 로그인 화면을 만들려면 어떻게 해야 할까? 

이걸 만들기 위해 사용하는 것이 폼이다.

<form>
  <label for="id">아이디</label>
  <input id="id" name="username">
  <label for="password">비밀번호</label>
  <input id="password" name="password" type="password">
  <button>로그인</button>
</form>

위 화면을 만드는 가장 간단한 폼이다.

<form></form> 위 화면과 같은 폼을 만든다는 선언을 하는 태그. 안쪽에 만들어 주면 된다.

<label></label> input의 이름을 쓰고 싶을 때 사용.

<label>
 아이디
 <input name="username">
</label>

<label for="id">아이디</label>
<input id="id" name="username">

라벨 안 쪽에 <input>을 넣거나 input의 id와 for를 일치시키면 클릭 시 포커싱이 간다.

<input> 값을 입력하는 태그. name은 폼 전송시 입력한 값에 매칭되는 이름이다.

<input name="username" placeholder="아이디">

placeholder를 사용하면 위 네이버 로그인 화면처럼 아이디라는 글씨를 띄울 수 있다.

input::placeholder{
  디자인;
}

placeholder의 스타일을 바꾸려면 CSS에서 input::placeholder를 사용하면 된다.

<input name="username" required>

반드시 입력해야하는 값이면 required를 사용하면 된다.

 

 

type이 굉장히 많다.

<input name="one_check" type="checkbox">

<input name="many_check" value="1" type="checkbox">
<input name="many_check" value="2" type="checkbox">
<input name="many_check" value="3" type="checkbox">

type="checkbox" 네모난 체크박스가 나타난다. 

하나의 체크박스의 경우, 체크 시 &one_check=on으로 전송된다.

아래의 여래개의 체크박스의 경우, name을 같게 해주어야 하며 첫번째와 세번째를 체크하면 &many_check=1&3처럼 전송된다.

<input name="date" type="date">

<input name="email" type="email">

<input name="password" type="password">

type="date" 날짜값을 넣을 수 있도록 해준다.

type="email" button을 누를 때 email 형식인지 판단한다.

type="password" 비밀번호 등을 입력 시 보이지 않도록 한다.

<input type="number">

<input type="number" min="100" max="10000" step="200">

type="number" 숫자만 받도록 한다.

min, max 숫자의 최대값과 최저값을 제한한다.

step 버튼 한번 누를 때마다 크기를 변경한다.

step 사용 input

<input name="file" type="file" accept=".png,.jpg" mutliple>

type="file" 파일을 받을 수 있도록 한다.

accept 받는 파일 형식을 제한한다.

mutliple 여러 개의 파일을 받을 수 있도록 만든다.

<input name="range" min="1" max="10" type="range">

<select name="game">
  <option value="fps">fps</option>
  <option value="lol">lol</option>
  <option value="rpg">rpg</option>
</select>

<input id="scissors" name="srp" value="0" type="radio">
<label for="scissors">가위</label>
<input id="rock" name="srp" value="1" type="radio">
<label for="rock">바위</label>
<input id="paper" name="srp" value="2" type="radio">
<label for="paper">보</label>

type="range"는 슬라이더가 나와서 값을 지정할 수 있다.

range

type="select"는 여러 값 중 하나를 선택하는 태그이다.

select

type="radio"는 여러 값 중 하나를 선택하는 태그이다.

radio

<input name="nickname" type="text">

<textarea name="content"></textarea>

type="text"  짧은 글 입력을 도와주는 태그

<textarea> 긴 글을 쓸 수 있도록 도와주는 태그

<button>
  버튼
</button>

버튼을 누르면 form 안에 있는 내용을 전달한다.

• type="button" 버튼을 눌러도 전송되지 않는다.
• type="reset" 버튼을 누르면 값들이 초기화된다.
• type="submit" 버튼을 누르면 값들이 전송된다. (default 값)

폼 바깥에 만들 수 있다. 바깥에 있을 경우 눌러도 폼 안에 영향을 주지 않는다.