[HTML] Form Attributes And Form Elements

The Action Attribute

• action 속성은 form이 제출될 때 수행할 작업을 정의합니다.
• 일반적으로 사용자가 제출 버튼을 클릭하면 form-data가 서버의 파일로 전송됩니다.
• 아래 예서 form-data는 "action_page.php"라는 파일로 전송됩니다.
• 이 파일에는 form-data를 처리하는 서버측 스크립트가 포함되어 있습니다.

# 제출 시 양식 데이터를 "action_page.php"로 보냅니다.

<form action="/action_page.php">
	<label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
</form>

• action 속성이 생략되면 action은 현재 페이지로 설정됩니다.

The Target Attribute

• target attribute는 제출한 후 받은 응답을 표시할 위치를 지정합니다.
• target attribute은 다음 값 중 하나를 가질 수 있습니다.

Value	Description
_blank	응답은 새 창이나 탭에 표시됩니다.
_self	응답은 현재 창에 표시됩니다.
_parent	응답은 상위 프레임에 표시됩니다.
_top	응답은 창의 전체 본문에 표시됩니다.
framename	응답은 명명된 iframe에 표시됩니다.

• 기본값은 응답이 현재 창에서 열릴 것임을 의미하는 _self입니다.

The Methods Attribute

• method 속성은 양식 데이터를 제출할 때 사용할 HTTP 방법을 지정합니다.
• form-data는 URL 변수(method="get") 또는 HTTP post transaction(method="post")로 보낼 수 있습니다.

# This example uses the GET method when submitting the form data:

<form action="/action_page.php" method="get">

This example uses the POST method when submitting the form data:

<form action="/action_page.php" method="post">

GET:

• name/value 쌍으로 form-data를 URL에 추가합니다.
• GET을 사용하여 민감한 데이터를 보내지 마십시오!(제출된 form-data는 URL에서 볼 수 있습니다!)
• URL 길이가 제한됩니다(2048자).
• 사용자가 결과를 bookmark로 지정하려는 form 제출에 유용합니다.
• GET은 Google의 쿼리 문자열과 같은 비보안 데이터에 유용합니다.

POST:

• HTTP 요청 body안에 form-data를 추가합니다(제출된 form-data는 URL에 표시되지 않음).
• POST는 크기 제한이 없으며 많은 양의 데이터를 보내는데 사용할 수 있습니다.
• POST가 포함된 form 제출은 bookmark로 지정할 수 없습니다.
• form-data에 민감한 정보나 개인 정보가 포함된 경우 항상 POST를 사용하십시오!

 

The Autocomplete Attribute

• autocomplete 속성은 form에 자동 완성 기능을 켜야 하는지 여부를 지정합니다.
• 자동 완성이 켜져 있으면 브라우저는 사용자가 이전에 입력한 값을 기반으로 자동으로 값을 완성합니다.

# A form with autocomplete on:

<form action="/action_page.php" autocomplete="on">

 

The Novalidate Attribute

• novalidate 속성은 boolean 속성입니다.
• 존재하는 경우 제출 시 form-data(입력)의 유효성을 검사하지 않아야 함을 지정합니다.

# A form with a novalidate attribute:

<form action="/action_page.php" novalidate>

 

The HTML Form Elements

HTML <form> 요소는 다음 form 요소 중 하나 이 상을 포함할 수 있습니다.

• <input>
• <label>
• <select>
• <textarea>
• <button>
• <fieldset>
• <legend>
• <datalist>
• <output>
• <option>
• <optgroup>

The <input> Element

• 가장 많이 사용되는 form elements 중 하나는 <input> element 입니다.
• <input> element는 type 속성에 따라 다양한 방식으로 표현될 수 있습니다.

<label form="fname">First name:</label>
<input type="text" id="fname" name="fname">

The <label> Element

• <label> elements는 여러  form elements의 레이블을 정의합니다.
• <label> elements는 사용자가 입력 요소에 초점을 맞출 때 screen-reader가 레이블을 소리내어 읽어주기 때문에 화면 판독기가 사용자에게 유용합니다.
• <label> 요소는 라디오 버튼이나 체크박스와 같은 아주 작은 영역을 클릭하는 데 어려움을 겪는 사용자에게 도움이 됩니다.
• 사용자가 <label> 요소 내의 텍스트를 클릭하면 라디오 버튼 / 체크박스 토글되기 때문입니다.
• <label> 태그의 for 속성은 함께 묶기 위해 <input> 요소의 id 속성과 같아야 합니다.

The <select> Element

<select> element는 드롭다운 목록을 정의합니다.

<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
	<option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>

• <option> 요소는 선택할 수 있는 옵션을 정의합니다.
• 기본적으로 드롭다운 목록의 첫 번째 항목이 선택됩니다.
• 미리 선택된 옵션을 저의하려면 선택한 속성을 옵션에 추가합니다.

<option value="fiat" selected>Fiat</option>

 

Visible Values:

size 속성을 사용하여 표시되는 값의 수를 지정합니다.

<label for="cars">Choose a car:</label>
<selected id="cars" name="cars" size="3">
	<option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>

 

다중 선택 허용

사용자가 둘 이상의 값을 선택할 수 있도록 하려면 다중 속성을 사용하십시오.

<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
	<option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>

 

The  <textarea> Element

<textarea> element는 여러 줄 입력 필드(텍스트 영역)을 정의합니다.

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

• row 속성은 텍스트 영역에 표시되는 줄 수를 지정합니다.
• cols 속성은 텍스트 영역의 가시적 너비를 지정합니다.

The <button> Element

<button> element는 클릭할 수 있는 버튼을 정의합니다.

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

• 항상 button 요소에 대한 유형 속성을 지정하십시오.
• 브라우저마다 버튼 요소에 대해 다른 기본 유형을 사용할 수 있습니다.

The <fieldset> and <legend> Elements

• <fieldset> 요소는 관련 데이터를 form으로 그룹화하는 데 사용됩니다.
• <legend> 요소는 <fieldset> 요소에 대한 캡션을 정의합니다.

<form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

 

 

 

REFERENCE

https://www.w3schools.com/html/html_forms_attributes.asp

HTML Form Attributes

https://www.w3schools.com/html/html_form_elements.asp

HTML Form Elements