HTML Form

폼은 웹 페이지에서 사용자의 데이터를 입력받을 수 있는 입력 양식을 말한다.

 

label과 input

폼은 form태그 안에 사용자의 입력을 받는 input태그와 설명을 위한 label태그의 쌍으로 구성된다.

<form>
    <lable>이름</lable>
    <input type="text">
</form>

 

for & id

각각의 input태그와 label태그를 묶어주기 위해서 label태그에는 for 속성, input태그에는 id가 사용된다.

<form>
    <label for="title">제목</label>
    <input type="text" id="title">
</form>

 

name

name은 입력된 데이터를 서버로 전송할 때, 서버에서 각각의 데이터를 구분하기 위한 속성으로 name 속성이 있는 양식 요소만 값이 서버로 전달된다.

<form>
    <label for="title">제목</label>
    <input type="text" id="title" name="title">
</form>

 

type

type은 입력할 값에 따른 유형을 나타내는 속성입니다. 이 type에 따라 사용자가 브라우저에서 값을 입력하는 형식인 위젯(widget)이 달라진다.

• email

<label for="email">이메일</label>
<input type="email" id="email" name="email">

• password

<label for="pwd">비밀번호</label>
<input type="password" id="pwd" name="pwd">

• button

<input type="button" value="버튼입니다">

• radio

<input type="radio" id="male" name="gender" value="male">
<label for="male">남자</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">여자</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">기타</label>

• checkbox

<input type="checkbox" id="lang1" name="lang1" value="Python">
<label for="lang1">파이썬(Python)</label><br>
<input type="checkbox" id="lang2" name="lang2" value="JAVA">
<label for="lang2">자바(JAVA)</label><br>
<input type="checkbox" id="lang3" name="lang3" value="Go">
<label for="lang3">고(Go)</label><br>

• date

<label for="birthday">생년월일</label>
<input type="date" id="birthday" name="birthday">

• file

<label for="userfiles">파일선택</label>
<input type="file" id="userfiles" name="userfiles" multiple>

• submit

<input type="submit" value="전송하기">

 

form 속성

form에는 입력된 데이터를 전송할 서버의 URL을 지정하는 action과 http 전달 방식을 지정해 주는 method 속성이 있다.

<form action="register" method="post">
    <label for="name">이름</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="제출하기">
</form>

 

GET과 POST

GET 방식으로 지정하면 유저가 데이터를 입력하고 전송했을 때 URL 뒤에 쿼리 스트링(Query String) 형태로 데이터가 전달된다.

<form action="/register" method="get">
    <label for="name">이름</label>
    <input type="text" id="name" name="name">
    <label for="email">이메일</label>
    <input type="email" id="email" name="email">
    <input type="submit" value="제출하기">
</form>

POST 방식은 전송되는 URL에는 표시되지 않고 서버로 전송하는 메세지 안쪽에 데이터를 넣어서 전달한다.

<form action="/register" method="post">
    <label for="name">이름</label>
    <input type="text" id="name" name="name">
    <label for="email">이메일</label>
    <input type="email" id="email" name="email">
    <input type="submit" value="제출하기">
</form>