HTML Forms

Form Basic

HTML form 은 사용자의 입력값을 받는데 사용된다. 

 

<form> : 사용자 입력값을 위한 HTML form 생성을 위한 태그이다 

<label> :  폼의 양식에 이름을 붙이는 태그이다. <label>의 for과 <input>의 id 속성은 서로 같아야한다

<input> : type에 따라서 다양한 방법으로 입력값을 받을 수 있다. 각 input field는 name 속성을 가지고 있어야 제출될 수 있다

 

<form>
  <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">
</form>

---

action :  폼이 제출되었을때 어떤 액션을 취할것인지 정의하는 태그이다

 

<form action="/action_page.php">

---

Target :  제출된 결과를 새 브라우저 탭이나 프레임,  현재 창 등 어디에서 에서 열지를 정한다

• _self : 폼이 현재 창에서 제출된다
• _blank : 폼의 결과가 새 브라우저 탭에서 열린다
• _parent , _top  : 그 외 가능한 값

<form action="/action_page.php" target="_blank">

---

method:  폼 데이터를 제출할 때 사용할 HTTP 메서드(GET 또는 POST)를 지정한다.

• GET : 폼 데이터가 페이지의 address field에 표시됨
• POST : 폼 데이터를 페이지의 address field에 표시하지 않아 개인정보나 예민한 정보를 다룰 때 사용한다

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

---

All <form> Attributes

Attribute	Description
accept-charset	Specifies the character encodings used for form submission
action	Specifies where to send the form-data when a form is submitted
autocomplete	Specifies whether a form should have autocomplete on or off
enctype	Specifies how the form-data should be encoded when submitting it to the server (only for method="post")
method	Specifies the HTTP method to use when sending form-data
name	Specifies the name of the form
novalidate	Specifies that the form should not be validated when submitted
rel	Specifies the relationship between a linked resource and the current document
target	Specifies where to display the response that is received after submitting the form

 

---

The HTML <form> Elements

<label> : 폼의 양식에 이름을 붙이는 태그이다.

• for : label로 묶을 id. <label>의 for의 값과 <input>의 id의 값이 같으면 연결된다
• form : label이 속한 form의 id

<input> : type에 따라서 다양한 방법으로 입력값을 받을 수 있다.각 input field는 name 속성을 가지고 있어야 제출될 수 있다

※ type을 지정하지 않으면 default type: "text" 로 지정된다

 

<h2>The input Element</h2>

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

 

---

<select> :  drop-down list로 선택지를 보여준다

• name :  드롭다운 목록의 이름
• size : 드롭다운 목록에서 보이는 옵션 개수
• disabled :  드롭다운 메뉴가 비활성화 된다
• multiple : 여러 옵션을 한번에 선택할 수 있게 한다 (windows - crtl, Mac - comman)
• autofocus :  페이지 로드시 입력란에 자동으로 포커스된다
• required :  선택이 필수임을 지정한다

<option> :  선택할 수 있는 옵션을 정의한다

• value :  서버에 전송될 값
• selected :  옵션이 미리 선택되고 드롭다운 목록에 맨 먼저 표시된다
• disabled : 옵션이 비활성화 된다

<optgroup>: 옵션 목록이 길 경우 관계 있는 옵션들끼리 묶어준다

• disabled : 비활성화
• label : 옵션 그룹에 대한 설명

<h2>The select Element</h2>

<p>The select element defines a drop-down list:</p>

<form action="/action_page.php">
  <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>
  <input type="submit">
</form>

 

---

<textarea> :  여러줄의 텍스트를 입력하는 창을 만든다

• cols : 텍스트 창의 너비를 결정. default 20
• rows : 텍스트 창의 높이를 결정. default 2
• disabled :  텍스트 영역이 비활성화
• name : 텍스트 영역의 이름을 설정
• readonly : 읽기만 가능한 텍스트 영역으로 만듬
• autofocus : 텍스트 영역이 페이지 로드시 자동으로 포커스
• form :  <textarea> 요소가 속한 form 요소를 지정
• maxlength : 텍스트 영역에서 허락된 문자의 최대 수
• required : 텍스트 입력이 필수임을 나타낸다

※ cols, rows 속성이 아닌 css의 width와 height 값으로 설정이 가능하다 

 

<h2>Textarea</h2>
<p>The textarea element defines a multi-line input field.</p>

<form action="/action_page.php">
  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
  <br><br>
  <input type="submit">
</form>

 

---

<button> :  버튼을 생성한다

• name : 버튼 이름
• type : 버튼 유형 - button, reset, submit
• value : button의 기본값 지정
• disabled : 버튼의 비활성화
• formtarget : target과 같음, 창이 열릴곳을 결정
• autofocus : 자동으로 포커스된다

※button은 양식 전송을 위해 자바스크립트가 필요하다

 

<h2>The button Element</h2>

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

 

---

<fieldset> :  관계된 요소들끼리 묶고 주위에 박스를 그린다

• name : fieldset 이름
• disabled : 비활성화

<legend> :  fieldset 요소에 대한 설명을 정의한다

 

<h2>Grouping Form Data with Fieldset</h2>

<p>The fieldset element is used to group related data in a form, and the legend element defines a caption for the fieldset element.</p>

<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>

 

---

<datalist> :  input 요소에 대해 미리 지정된 옵션 목록을 제공한다 (특정 글자 입력시 해당 목록이 보여짐)

 

※<input> - list가 <datalist>의 id와 같은 값으로 묶일 수 있다

 

<h2>The datalist Element</h2>

<p>The datalist element specifies a list of pre-defined options for an input element.</p>

<form action="/action_page.php">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>

<p><b>Note:</b> The datalist tag is not supported in Safari prior version 12.1.</p>

 

---

<output> :  계산의 결과를 나타낸다

 

<h2>The output Element</h2>
<p>The output element represents the result of a calculation.</p>

<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range" id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

 

 

---