[기초강좌] HTML Forms and Input - w3schools 번역

[기초강좌] HTML Forms and Input - w3schools 번역

w3school 의 강좌 내용을 번역한 글입니다.

원문 : http://www.w3schools.com/html/html_forms.asp

HTML Form 은 여러 종류의 input 을 받기 위해서 사용된다.

HTML Forms

HTML Form 은 서버에 데이터를 전송하기 위해서 사용된다.

HTML form 은 text field, checkbox, radio-button, submit button 등의 입력을 받는 element 들을 가지고 있다. form 은 select list, textarea, fieldset, legend, label 과 같은 element 들도 가지고 있다.

<form> tag 는 HTML form 을 생성하는 데 사용된다.

<form>

.

input elements

.

</form>

HTML Forms - The Input Element

가장 중요한 form element 는 <input> element 이다.

<input> element 는 유저의 정보를 받는 데 사용된다.

<input> element 는 type 속성에 의해 여러가지로 변형될 수 있다. <input> element 는 text field, checkbox, password, radio button, submit button 등이 될 수 있다.

가장 흔하게 사용되는 input type 은 아래에 설명된다.

Text Fields

<input type="text"> 는 한 줄짜리 입력 필드를 생성하며, 유저가 그 안에 글씨를 쓸 수 있다.

<form>

First name: <input type="text" name="firstname"><br>

Last name: <input type="text" name="lastname">

</form>

결과는 다음과 같다.

First name: 
Last name: 

주의 : form 태그 그 자체는 보여지지 않는다. text field 의 기본 너비는 20 글자를 수용하는 너비이다.

Password Field.

<input type="password"> 는 암호 필드를 정의한다.

<form>

Password: <input type="password" name="pwd">

</form>

결과는 아래와 같다.

Password: 

주의 : 암호 필드에 들어가는 글씨들은 숨김표시가 된다. ( 별표(*) 혹은 동그라미로 )

Radio Buttons

<input type="radio"> 는 라디오 버튼을 정의한다. 라디오 버튼은 유저가 여러개의 선택지 중 하나만 선택할 수 있도록 제한한다.

<form>

<input type="radio" name="sex" value="male">Male<br>

<input type="radio" name="sex" value="female">Female

</form>

결과는 아래와 같다.

Male
Female

Checkboxes

<input type="checkbox"> 는 체크박스를 정의한다. Checkbox 는 유저가 여러개의 선택지 중 0개 이상 ( 선택을 안 해도 되고, 여러개를 선택해도 된다. )을 선택할 수 있도록 한다.

<form>

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>

<input type="checkbox" name="vehicle" value="Car">I have a car 

</form>

결과는 아래와 같다.

I have a bike
I have a car

Submit Button

<input type="submit"> 은 제출 버튼을 정의한다.

제출 버튼은 데이터를 서버에 보내는 데 사용된다. form 의 action 속성에 명시된 페이지로 정보를 보낸다. action 속성에 정의된 파일은 받은 정보를 바탕으로 무언가 작업을 한다.

<form name="input" action="html_form_action.asp" method="get">

Username: <input type="text" name="user">

<input type="submit" value="Submit">

</form>

결과는 아래와 같다.

Username: 

text field 에 어떤 글씨를 입력한 후 "Submit" 버튼을 누르면, 브라우저는 입력된 정보를 html_form_action.asp 에게 보낸다.

HTML Form Tags

New 는 HTML5 에 새로 소개된 tag 이다.

Tag	Description
<form>	Defines an HTML form for user input
<input>	Defines an input control
<textarea>	Defines a multiline input control (text area)
<label>	Defines a label for an <input> element
<fieldset>	Groups related elements in a form
<legend>	Defines a caption for a <fieldset> element
<select>	Defines a drop-down list
<optgroup>	Defines a group of related options in a drop-down list
<option>	Defines an option in a drop-down list
<button>	Defines a clickable button
<datalist>New	Specifies a list of pre-defined options for input controls
<keygen>New	Defines a key-pair generator field (for forms)
<output>New	Defines the result of a calculation

다음 강좌 보기 >>

Action, Button, CheckBox, Checkboxes, datalist, FIELDSET, form, form tag, html form, HTML Form Tags, HTML Forms, HTML Forms - The Input Element, input, input tag, input type, keygen, Label, Legend, Method, optgroup, option, output, password, Password Field., Radio, Radio Buttons, radio-button, select, select list, SUBMIT, Submit Button, text, text field, Text Fields, textarea, tutorial, type, [기초강좌] HTML Forms and Input - w3schools 번역, 기초 강좌, 데이터, 서버, 암호, 암호 필드, 전송