[Html] 입력 양식 요소 - Form과 Input

폼(Form) 요소의 구조

• 웹 페이지에서는 form 요소는 사용자로부터 입력받거나, 사용자가 입력한 데이터를 서버로 보낼 때 사용한다. 
• action 속성은 입력 데이터를 전송할 URL 주소를 명시한다. method 속성은 입력 데이터 전달 방식을 의미하며, HTTP 프로토콜로 입력 데이터를 서버에 전달하는 Get과 Post 방식이 있다.

<form name="이름" action="입력 데이터 처리" method="전송방식">
    <input type="입력값" name="이름" value="value1">
</form>

 

폼(Form)의 method 속성

Get 방식

• Get 방식은 전송 URL에 입력 데이터를 쿼리 스트링(Query String)으로 보내는 방식으로, URL 뒷 부분에 데이터를 추가해 전달한다. 
• 데이터가 주소 입력창에 그대로 나타나 보안에 취약하고, 전송할 수 있는 최대 글자수가 정해져있어서 크기도 제한적이다.
• URL 바로 뒤에 ?를 통해 데이터의 시작을 알려주고, key-value형태의 데이터를 추가하며, 1개 이상의 전송 데이터는 &로 구분한다.

http://jsonplaceholder.typicode.com/posts?userId=1&id=1

Post 방식

• POST 방식은 리퀘스트 바디(Request Body)에 담아 보내는 방식으로, HTTP Request 헤더에 데이터를 별도로 첨부하여 전달한다.
• 데이터가 외부에 드러나지 않아 보안성이 좋고 최대 글자 제한이 없어 활용성도 좋다.

http://jsonplaceholder.typicode.com/posts

 

폼(Form) 요소

입력(input)과 라벨(label)

• input은 사용자로부터 데이터를 입력받기 위해 사용되는데 label은 그런 input 요소의 라벨을 표시한다.
• form 태그 내에 존재하여야 입력 데이터를 전송할 수 있으나 ajax를 사용할 시에는 form 태그 내에 존재하지 않아도 된다.
• 서버에 전송되는 데이터는 name 속성을 키로, value 속성을 값으로 key:value의 형태로 전송된다.

<form action="/examples/media/request.php">
    <label for="name">이름:</label>
    <input type="text" id="name" name="name" size="20">
</form>

입력 선택(select), 그룹(optgroup), 옵션(option)

• select는 여러 개의 옵션이 드롭다운 리스트로 되어 있으며, 그 중에서 단 하나의 옵션을 입력받을 때 사용한다.
• option 요소는 드롭다운 리스트에서 선택할 수 있는 옵션 값을 생성하고, optgroup 요소는 그런 옵션값들을 그룹화 한다. 
• selected 속성을 이용하여 드롭다운 리스트 중에서 처음에 미리 선택되는 옵션을 지정할 수 있다.

<form action="/examples/media/request.php">
    <select id="food" name="food" multiple>
      <optgroup label="음식">
        <option value="pizza" selected>피자</option>
        <option value="hamburger">햄버거</option>
        <option value="pasta">파스타</option>
      </optgroup>
      <optgroup label="후식">
        <option value="cola">콜라</option>
        <option value="coffee">커피</option>
        <option value="icecream">아이스크림</option>
      </optgroup>
    </select>
</form>

문장 입력(textarea)

• textarea는 여러 줄의 텍스트를 입력받을 때 사용한다.
• rows와 cols 속성을 이용하여 textarea 요소의 크기를 자유롭게 지정할 수 있다.

<form action="/examples/media/request.php">
    <textarea name="message" rows="5" cols="30">
        여기에 적으세요.
    </textarea>
</form>

버튼 입력(button)

• button은 사용자가 누를 수 있는 버튼을 생성하는데 type 속성값으로 button, reset, submit를 가지며, <input type="button">과 비슷하다.
• input은 빈 태그인 반면에 button은 종료 태그를 가지기에 텍스트나 이미지 같은 콘텐츠를 사용할 수 있지만, 익스플로어에 따라 전송값이 달라질 수 있기에 input 태그를 사용하는게 좋다.

<form action="/examples/media/request1.php">
    <button type="button" onclick="alert('Hello World!')">
       Click Me!
    </button>
</form>

<form action="/examples/media/request2.php">
    <input type="button" value="Click Me!" onclick="alert('Hello world!')">
</form>

필드셋(fieldset)과 캡션(legend)

• fieldset은  관련된 입력 양식들을 그룹화할 때 사용하고, legend는 fieldset 안에서만 사용하며 그룹화된 fieldset의 제목을 나타낸다.

<form action="/examples/media/request.php">
    <fieldset>
        <legend>입력 양식</legend>
        이름 : <br>
        <input type="text" name="username"><br>
        이메일 : <br>
        <input type="text" name="email"><br><br>
        <input type="submit" value="전송">
    </fieldset>
</form>

옵션 리스트(datalist)

• datalist 요소는 input 요소에 대해 미리 정의된 옵션 리스트를 명시해 준다.
• 사용자는 텍스트를 바로 입력해도 되고, 드롭다운 메뉴에서 미리 정의한 옵션 중의 하나를 골라도 되지만, input 요소의 list 속성값이 datalist 요소의 id 속성값과 반드시 일치해야만 연결된다.
• 사파리와 익스플로러 9 이전 버전들에서는 지원하지 않는다.

<form action="/examples/media/request.php">
    <input list="lectures" name="lecture">
        <datalist id="lectures">
            <option value="HTML">
            <option value="CSS">
            <option value="JAVA">
            <option value="C++">
        </datalist>
    <input type="submit" value="전송">
</form>

계산 결과(output)

• output 요소는 스크립트 등으로 실행된 계산 결과를 바로 표시해주는 요소다.
• for 속성을 사용하여 해당 결과에 영향을 줄 수 있는 HTML 문서 내의 요소를 명시할 수 있는데, 이 때 for 속성의 속성값에는 해당 요소의 id 속성값을 공백으로 나열해야 한다.
• output 요소는 익스플로러에서 지원하지 않는다.

<form action="/examples/media/request.php" oninput="total.value=parseInt(value01.value)/parseInt(value02.value)">
    <input type="number" id="value01" name="input01" value="20">
    / ( 0
    <input type="range" id="value02" name="input02" value="50" min="0" max="100">
    100 ) =
    <output name="total" for="value01 value02"></output><br><br>
</form>

키 생성(keygen)

• keygen 요소는 form 요소 안에 두 개의 key를 만들어주는 생성기를 말한다.
• keygen의 목적은 사용자가 인증할 수 있는 안전한 방법을 제공하는 것으로, 사용자가 입력한 데이터를 암호화하여 서버로 전송하고, 이때 생성된 키를 가지고 서버는 해당 사용자의 인증을 수행한다.
• keygen 요소는 익스플로러에서 지원하지 않는다. 

<form action="/examples/media/request.php">
    사용자 : <br>
    <input type="text" name="username"><br>
    암호화방법 : <br>
    <keygen name="security"><br>
</form>

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/