HTML | Input Type 종류

Input Type: text

<input type="text"> 텍스트 입력(text input)위 한 줄의 입력 필드를 정의 text input:

Example

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

Try it Yourself »

위의 HTML 코드는 브라우저에서 다음과 같이 보여집니다:

First name:

Last name:

---

Input Type: password

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

password 필드의 문자는 별표나 동그라 미로 표시로 가려집니다.

Example

<form>
  User name:<br>
  <input type="text" name="username"><br>
  User password:<br>
  <input type="password" name="psw">
</form>

Try it Yourself »

위의 HTML 코드는 브라우저에서 다음과 같이 보여집니다.:

User name:

User password:

 

---

Input Type: submit

<input type="submit"> 는 폼 -헨들러 (form- handler)에게 폼을 제출하 는 버튼을 정의합니다.

폼-헨들러(form-handler)는 일반적으로 입력 자료를 처리할 스크립트로 이루어진 서버페이지이 다.

폼-헨들러(form-handler)는 폼의 action 속성에 명시되며 일반적으로 수신된 입력을 가지고 무언가를 수행합니다.:

Example

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

Try it Yourself »

위의 HTML 코드는 브라우저에서 다음과 같이 보여집니다.

First name:

Last name:

submit 버튼의 value 속성을 생략하며, 버튼에는 기본값이 할당된다.:

Example

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit">
</form>

Try it Yourself »

---

Input Type: radio

<input type="radio"> 라디오 버튼(radio button)을 정의합니다.

라디오 버튼은 사용자가 제한된 개수의 선택 중 하나만 선택할 수 있습니다 :

Example

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

Try it Yourself »

위의 HTML 코드는 브라우저에서 다음과 같이 보여집니다.:

Male

Female

---

Input Type: checkbox

<input type="checkbox"> 체크박스(checkbox) 를 정의 합니다.

체크박스는 제한된 선택들 중에서 사용자가 임의의 개 수를 선택할 수 있게 해준다.

Example

<form>
  <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>

Try it Yourself »

위의 HTML 코드는 브라우저에서 다음과 같이 보여집니다.:

I have a bike

I have a car

---

Input Type: button

<input type="button">  버튼(button) 을 정의:

Example

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

Try it Yourself »

 

---

출처 : http://jun.hansung.ac.kr/