본문 바로가기
프로그래밍 놀이터/Web

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

by 돼지왕 왕돼지 2014. 3. 21.
반응형


 [기초강좌] 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 이다.


TagDescription
<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>NewSpecifies a list of pre-defined options for input controls
<keygen>NewDefines a key-pair generator field (for forms)
<output>NewDefines the result of a calculation









반응형

댓글