doc 3

<!DOCTYPE html>

<html>

<body>

<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 or IE9 (and earlier).</p>

</body>

</html>

<!DOCTYPE html>

<html>

<body>

<p>Click on one of the text labels to toggle the related control:</p>

<form action="demo_form.asp">

<label for="male">Male</label>

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

<label for="female">Female</label>

<input type="radio" name="sex" id="female" value="female"><br><br>

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

</form>

</body>

</html>

HTML Input Types« Previous

Next Chapter »

Input Types

This chapter describes the input types of the <input> element.

Input Type: text

<input type="text"> defines a one-line input field for 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 »

This is how the HTML code above will be displayed in a browser:

First name:

Last name:

Input Type: password

<input type="password"> defines a password field:

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

Try it Yourself »


User name:

User password:

The characters in a password field are masked (shown as asterisks or circles).

Input Type: submit

<input type="submit"> defines a button for submitting form input to

a form-handler.

The form-handler is typically a server page with a script for processing input

data.

The form-handler is specified in the form's action attribute:

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 »


First name:

Last name:

If you omit the submit button's value attribute, the button will get a default text:

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"> defines a radio button.

Radio buttons let a user select ONLY ONE of a limited number of choices:

Example

Mickey

Mouse

Submit

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

Try it Yourself »


Male

Female

Input Type: checkbox

<input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of

choices.

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 »


I have a bike

I have a car

Input Type: button

<input type="button"> defines a button:

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

Try it Yourself »


<!DOCTYPE html>

<html>

<body>

<table border="1" style="width:100%">

<tr>

<td>Jill</td>

<td>Smith</td>

<td>50</td>

</tr>

<tr>

<td>Eve</td>

<td>Jackson</td>

<td>94</td>

</tr>

<tr>

<td>John</td>

<td>Doe</td>

<td>80</td>

</tr>

</table>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

Jill Smith 50Eve Jackson 94John Doe 80

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 15px;

}

</style>

</head>

<body>

<table style="width:100%">

<tr>

<td>Jill</td>

<td>Smith</td>

<td>50</td>

</tr>

<tr>

<td>Eve</td>

<td>Jackson</td>

<td>94</td>

</tr>

<tr>

<td>John</td>

<td>Doe</td>

<td>80</td>

</tr>

</table>

<p>Try to change the padding to 5px.</p>

</body>

</html>

Jill Smith 50

Eve Jackson 94

John Doe 80

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {


padding: 5px;

}

table {

border-spacing: 15px;

}

</style>

</head>

<body>


<tr>

<td>Jill</td>

<td>Smith</td>

<td>50</td>

</tr>

<tr>

<td>Eve</td>

<td>Jackson</td>

<td>94</td>

</tr>

<tr>

<td>John</td>

<td>Doe</td>

<td>80</td>

</tr>

</table>

<p>Try to change the border-spacing to 5px.</p>

</body>

</html>

Try to change the border-spacing to 5px.

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {



}

th, td {

padding: 5px;

text-align: left;

}

</style>

</head>

<body>

<h2>Cell that spans two columns:</h2>


<tr>

<th>Name</th>

<th colspan="2">Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

<td>555 77 854</td>

<td>555 77 855</td>

</tr>

</table>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {



}

th, td {

padding: 5px;

text-align: left;

}

</style>

</head>

<body>

<h2>Cell that spans two rows:</h2>


<tr>

<th>Name:</th>

<td>Bill Gates</td>

</tr>

<tr>

<th rowspan="2">Telephone:</th>

<td>555 77 854</td>

</tr>

<tr>

<td>555 77 855</td>

</tr>

</table>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {


}

</style>

</head>

<body>

<table>

<colgroup>

<col span="2" style="background-color:red">

<col style="background-color:yellow">

</colgroup>

<tr>

<th>ISBN</th>

<th>Title</th>

<th>Price</th>

</tr>

<tr>

<td>3476896</td>

<td>My first HTML</td>

<td>$53</td>

</tr>

<tr>

<td>5869207</td>

<td>My first CSS</td>

<td>$49</td>

</tr>

</table>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

thead {color:green;}

tbody {color:blue;}

tfoot {color:red;}

table, th, td {


}

</style>

</head>

<body>

<table>

<thead>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

</thead>

<tfoot>

<tr>

<td>Sum</td>

<td>$180</td>

</tr>

</tfoot>

<tbody>

<tr>

<td>January</td>

<td>$100</td>

</tr>

<tr>

<td>February</td>

<td>$80</td>

</tr>

</tbody>

</table>

Documents

doc 3