HTML Lesson: Input Type


Jenis-jenis input dalam HTML.

Input Type: text

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

Input Type: radio

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

Input Type: submit

<form action="http://shahrulnizam.com">
First name:<br>
<input type="text" name="firstname" value="Shahrul">
<br>
Last name:<br>
<input type="text" name="lastname" value="Nizam">
<br>
<input type="submit" value="Submit">
</form>

Input Type: drop-down List

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

Input Type: number

<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>

Input Type: date

<form>
Birthday:
<input type="date" name="bday">
</form>

Input Type: color

<form>
Select your favorite color:
<input type="color" name="favcolor" value="#ff0000">
</form>

Input Type: range

<form>
Range from 0 to 10:
<input type="range" name="points" min="0" max="10">
</form>

Input Type: month

<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>

Input Type: week

<form>
Select a week:
<input type="week" name="week_year">
</form>

Input Type: time

<form>
Select a time:
<input type="time" name="usr_time">
</form>

Input Type: datetime

<form>
Birthday (date and time):
<input type="datetime" name="bdaytime">
</form>

Input Type: datetime-local

<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>

Input Type: email

<form>
E-mail:
<input type="email" name="email">
</form>

Input Type: search

<form>
Search Google:
<input type="search" name="googlesearch">
</form>

Input Type: tel

<form>
Telephone:
<input type="tel" name="usrtel">
</form>

Input Type: url

<form>
Add your homepage:
<input type="url" name="homepage">
</form>

Contoh: http://shahrulnizam.com/web/input_type.html

Penerangan lanjut di

  1. http://www.w3schools.com/html/html_forms.asp
  2. http://www.w3schools.com/html/html_form_input_types.asp

Leave a Reply

Your email address will not be published. Required fields are marked *