HTML5 - Form tag

이소라·2021년 6월 11일
0

1. Form tag

  • 사용자가 입력한 데이터를 수집하기 위해 사용됨
  • input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그를 포함함

Form tag attribute

attributevaluedescription
actionURL입력 데이터(form data)가 전송될 URL 지정
methodget/post입력 데이터(form data) 전달 방식 지정

GET / POST

  • HTTP 프로토콜을 이용하여 사용자 입력 데이터를 서버에 전달하는 방식
  • HTTP request method

HTTP (Hyper Text Transfer Protocol)

  • W3 (World Wide Web) 상에서 정보를 주고받을 수 있는 프로토콜
  • 주로 HTML 문서를 주고 받는데 사용함
  • 클라이언트와 서버 사이에 이루어지는 요청/응답(request/response) 프로토콜

GET

  • 전송 URL을 쿼리스트링으로 보내는 방식
    예) http://jsonplaceholder.typicode.com/posts?userId=1&id=1
  • 전송 URL 바로 뒤에 "?" 붙이고 Key-Value 형태의 데이터를 추가함
  • 1개 이상의 전송 데이터는 "&"로 구분함
  • URL에 전송 데이터가 모두 노출되기 때문에 보안에 문제가 있음
  • 전송할 수 있는 데이터의 한계가 있음 (255자)
  • REST API에서 GET 메소드는 모든 또는 특정 리소스의 조회를 요청함

POST

  • Request Body에 담아 보내는 방식
    예) http://jsonplaceholder.typicode.com/posts
  • URL에 전송 데이터가 모두 노출되지 않음
  • GET에 비해 속도가 느림
  • REST API에서 POST 메소드는 특정 리소스의 생성을 요청함
<!DOCTYPE html>
<html>
  <body>
    <form action="jsonplaceholder.typicode.com/users" method="get">
      ID: <input type="text" name="id" value="1"><br>
      username: <input type="text" name="username" value="Sora"><br>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

-submit button 클릭 -> input tag에 입력된 데이터가 form tag의 method attribute가 지정한 방식으로
action attribute에 지정된 서버측의 처리 로직에 전달됨

2. Input

  • form tag 중 가장 중요한 태그
  • 사용자로부터 데이터를 입력받기 위해 사용됨
  • type attribute에 따라 구분됨
  • form tag 내에 존재해야 입력 데이터를 전송할 수 있음
    - ajax를 사용한다면 form tag 내에 존재하지 않아도 됨
  • 서버에 전송되는 데이터는 name attribute를 key로 value attribute를 value로 하여 key-value 형태로 전송됨
Type attributeDescriptionHTML5 추가IEFFCRSFOP
button버튼 생성OOOOO
checkboxcheckbox 생성OOOOO
color컬러 선택 생성OXOOXO
datedate control(년월일) 생성OXXOOO
datetimedate & time control(년월일시분초) 생성OXXXXX
datetime-local지역 date & time control(년월일시분초) 생성OXXOOO
email이메일 입력 form 생성, submit시 자동검증OOOOXO
file파일 선택 form 생성OOOOO
hidden감추어진 입력 form 생성OOOOO
image이미지로 된 submit button 생성OOOOO
month월 선택 form 생성OXXOOO
number숫자 입력 form 생성OOOOOO
passwordpassword 입력 form 생성OOOOO
radioradio button 생성OOOOO
range범위 선택 form 생성OOOOOO
reset초기화 button 생성OOOOO
search검색어 입력 form 생성OXXOOX
submit제출 button 생성OOOOO
tel전화번호 입력 form 생성OXXXXX
text텍스트 입력 form 생성OOOOO
time시간 선택 form 생성OXXOOO
urlurl 입력 form 생성OOOOXO
week주 선택 입력 form 생성OXXOOO
<!DOCTYPE html>
<html>
  <body>
    <h3>button</h3>
    <input type="button" value="Click me" onclick="alert('Hello World')">
    <hr>
    
    <h3>checkbox</h3>
    <input type="checkbox" value="fruit1" value="apple" checked> 사과<br>
    <input type="checkbox" value="fruit2" value="grape"> 표도<br>
    <input type="checkbox" value="fruit3" value="peach"> 복숭아<br>
    <hr>
    
    <h3>color</h3>
    <input type="color" name="mycolor">
    <hr>
    
    <h3>date</h3>
    <input type="date" name="birthday">
    <hr>
    
    <h3>datetime</h3>
    <input type="datetime" name="birthdaytime">
    <hr>
    
    <h3>datetime-local</h3>
    <input type="datetime-local" name="birthdaytime">
    <hr>
    
    <h3>email</h3>
    <input type="email" name="useremail">
    <hr>
    
    <h3>file</h3>
    <input type="file" name="myfile">
    <hr>

    <h3>hidden</h3>
    <input type="hidden" name="country" value="Korea">
    Hidden filed는 사용자에게는 보이지 않는다.
    <hr>
    
    <h3>image</h3>
    <input type="image" src="image/image_submit.gif" alt="Submit" width="48" height="48">
    <hr>
    
    <h3>month</h3>
    <input type="month" name="birthdaymonth">
    <hr>
    
    <h3>number</h3>
    <input type="number" name="quantity" min="2" max="10" step="2" value="2">
    <hr>
    
    <h3>password</h3>
    <input type="password" name="pwd">
    <hr>
    
    <h3>radio</h3>
    <input type="radio" name="gender" value="male" checked> 남자<br>
    <input type="radio" name="gender" value="female"> 여자<br>
    <hr>
    
    <h3>range</h3>
    <input type="range" name="points" min="0" max="10" step="1" value="5">
    <hr>
    
    <h3>reset</h3>
    <input type="reset">
    <hr>
    
    <h3>search</h3>
    <input type="search" name="goolgesearch">
    <hr>
    
    <h3>submit</h3>
    <input type="submit" value="Submit">
    <hr>
    
    <h3>tel</h3>
    <input type="tel" name="mytel">
    <hr>
    
    <h3>text</h3>
    <input type="text" name="mytext">
    <hr>
    
    <h3>time</h3>
    <input type="time" name="mytime">
    <hr>
    
    <h3>url</h3>
    <input type="url" name="myurl">
    <hr>
    
    <h3>week</h3>
    <input type="week" name="week_year">
  </body>
</html>

3. select

  • 다수의 리스트에서 다수의 아이템을 선택할 때 사용
  • 서버에 전송되는 데이터는 select tag의 name attribute를 key로, option tag의 value attribute를 value로 하여 key-value 형태로 전송됨
    • slect tag : select form 생성
    • option tag : option 생성
    • optgroup : option을 그룹화함
<!DOCTYPE html>
<html>
  <body>
    <select name="car1">
      <option value="volvo" selected>Volvo</option>
      <option value="saab" disabled>Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi</option>
    </select>
    
    <select name="car2" size="4" multiple>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi" selected>Audi</option>
    </select>
    
    <select name="cars3">
      <optgroup label="Swedish Cars">
        <option value="Volvo">Volvo</option>
        <option value="saab">Saab</option>
      </optgroup>
      <optgroup label="German Cars" disabled>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </optgroup>
    </select>
  </body>
</html>

4. textarea

  • 여러줄의 글자를 입력할 때 사용
<!DOCTYPE html>
<html>
  <body>
    <textarea name="message" rows="10" cols="30">Write something here</textarea>
  </body>
</html>

5. button

  • 클릭할 수 있는 버튼을 생성
  • input tag의 button attribute는 빈 태그인 반면, button tag는 텍스트나 이미지 같은 컨텐츠를 사용할 수 있음
  • type attribute(button, reset, submit)는 반드시 지정하는 것이 좋음
<!DOCTYPE html>
<html>
  <body>
    <button type="button" onclick="alert('Hello World')">Click me!</button>
    
    <input type="button" value="Click me!" onclick="alert('Hello World')">
  </body>
</html>

6. fieldset / legend

  • fieldset tag : 관련된 입력 양식들을 그룹화할 때 사용
  • legend tag : fieldset tag 내에서만 사용해야함, 그룹화된 fieldset tag의 제목을 정의
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <fieldset>
      <legend>Login</legend>
      Username <input type="text" name="username">
      Password <input type="text" name="password">
    </fieldset>
  </body>
</html>

0개의 댓글