[HTML, CSS] form 태그

<form> 태그는 사용자로부터 입력을 받을 때와 입력한 데이터를 서버로 보낼 때 사용합니다.

 

<form> 태그의 기본적인 형식은 다음과 같습니다.

<form action="where_to_send_data" method="what_HTTP_method_to_use"></form>

- action 속성은 <form> 태그를 통해 입력된 데이터를 어디로 보낼지 명시힙ㄴ;다. 이 URL은 2가지 값이 가능한데, ① 절대 주소를 활용한 다른 웹사이트 주소 또는 ② 상대 주소를 활용한 서버 상의 스크립트 파일(form-handler)의 주소입니다. 

 

- method 속성은 입력된 데이터를 서버에 전달할 방식을 명시힙ㄴ;다. 가능한 방식으로는 GET과 POST가 있습니다. 

    * GET : 값을 가져온다는 이유로 "get"이라는 이름을 가지고 있으며, 데이터를 URL 변수에 담습니다. URL 자체에 포함이 되기 때문에 사용자가 기록하기가 쉽습니다. 하지만 URL 자체의 길이에 제한이 있다는 점, 데이터가 공개되기 때문에 안전성이 떨어진다는 단점이 있습니다.

    * POST : 값을 게시한다는 이유로 "post"라는 이름을 가지고 있으며, 데이터를 HTTP 패킷의 바디 부분에 담습니다. 데이터 길이에 제한이 없고 보안성이 강하다는 장점이 있습니다.

 

<form> 태그는 입력하는 영역을 정의하는 것으로, 독립적으로 사용하지 않고 내부에 <input> 태그를 통해 사용자가 입력할 수 있는 양식을 나타냅니다. <input> 태그의 value 속성은 태그 내부에 표시되는 텍스트를 정의합니다. <input> 태그의 종류는 type 속성으로 구분되는데 다음과 같은 유형들이 있습니다. 

- button, checkbox, email, hidden, password 등등...

 

<label> 태그를 사용하면 <label> 태그 안에 있는 텍스트도 아이콘으로 인식해서, 클릭하기 어려운 <input> 태그를 사용하기 쉽게 합니다. 또 다른 장점으로는, <input> 태그를 라벨링함으로써 스크린 리더를 사용할 때 가독성이 높아집니다. <label> 태그의 name 속성은 연결된 <input> 태그의 아이디와 같아야 합니다.

 

다음은 <form> 태그를 활용한 예시입니다.

<form>
    Button<input type="button" value="Click"><br>
    Checkbox : <br>
    <input type="checkbox" name="color" id="red_id" value="red">
    <label for="red_id">Red</label><br>
    <input type="checkbox" name="color" id="blue_id" value="blue">
    <label for="blue_id">Blue</label><br>
    Color : <input type="color" value="ff0000"><br>
    Date : <input type="date"><br>
    Email : <input type="email"><br>
    <input type="hidden" value="1235"><br>
    Password : <input type="password"><br>
    Radio : <br>
    <input type="radio" id="male" name="gender">
    <label for="male">Male</label><br>
    <input type="radio" id="female" name="gender">
    <label for="female">Female</label><br>
    Range : <input type="range" min="0" max="100"><br>
    <label for="qsearch">Search : </label>
    <input type="search" id="qsearch" name="qsearch"><br>
    <input type="submit" value="submit"><br>
    Text(default) : <input type="text"><br>
    Url : <input type="url">
</form>

Button
Checkbox :
Red
Blue
Color :
Date :
Email :

Password :
Radio :
Male
Female
Range :
Search :

Text(default) :
Url :