HTML 핵심개념 뽀개기! (4) 폼

폼

내 데이터를 웹사이트로 보내고 싶을 때 사용한다. 

 

인풋(input)

내용을 적는 칸

닫는 태그 없이 시작 태그만 적어서 사용한다.

 

라벨(label)

각 인풋 옆에 붙은 이름(인풋에 설명)

 

* input태그에 아이디 속성을 작성하고, 라벨 태그에는 for라는 속성을 이용하여 같은 이름으로 작성하면(일치시키면) label과 input이 연결되어 위에서 작성한 라벨과 같은 역할을 할 수 있다. 

 

 

네임 (name)

각 데이터의 이름으로 쓰는 것

이메일을 적고 나서 엔터를 입력하면 입력한 값이 적힌 주소로 이동함을 확인할 수 있다. 

form 태그가 데이터 전송할 때 각 데이터의 이름으로 사용한다. 

 

 

 

비밀번호 안보이게 설정하기

type을 password로 설정하면 가릴 수 있다. 

 

+)input 태그 속에 type 속성 사용하기

- 항목을 선택하는 경우 checkbox 타입 사용하기

<label>
  <input name="agreement" type="checkbox">
  동의합니다
</label>

 

-여러 항목 중 하나의 항목만 선택할 수 있으며 동그란 선택 버튼을 만들고 싶은 경우 radio 타입 사용하기

<input id="very-bad" name="feeling" value="0" type="radio">
<label for="very-bad">아주 나쁨</label>
<input id="bad" name="feeling" value="1" type="radio">
<label for="bad">나쁨</label>

 

 

-선택한 날짜로 값 지정하는 경우 date 타입 사용하기

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

 

-파일을 선택하는 경우 file 타입 사용하기

<input name="files" type="file">

 

-파일 형식 지정하는 경우 accept 속성을 써서 허용할 파일 확장자들을 정하기

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

 

-이메일 형식인지 검사해야하는 경우 email 타입 사용하기

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

 

- 긴글을 입력할 때 textarea 인풋 사용하기

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

 

 

버튼(button)

버튼을 누르면 입력한 내용을 전송할 수 있다. 

 

button의 type이라는 속성을 바꾸면 버튼 동작을 바꿀 수 있다. 

type="button" : 버튼을 눌러도 전송되지 않는다. 

type="submit" : 버튼을 눌렀을 때 데이터를 전송한다. (기본 값)

type="reset" : 내용을 초기화하는 버튼을 생성한다.