Scribd
Upload
43 views9 pages

Forms

The document describes different types of HTML form elements including text fields, password fields, radio buttons, checkboxes, buttons, textareas, drop down lists, and pre-selected options in drop down lists. Examples of the code for each element are provided.

Uploaded by

SarbAnons
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
43 views9 pages

Forms

The document describes different types of HTML form elements including text fields, password fields, radio buttons, checkboxes, buttons, textareas, drop down lists, and pre-selected options in drop down lists. Examples of the code for each element are provided.

Uploaded by

SarbAnons
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 9

Text Field

<html>
<body>

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

<p><b>Note:</b> The form itself is not visible. Also


note that the default width of a text field is 20
characters.</p>

</body>
</html>
Output:
First name:
Last name:

Password Field

<html>
<body>

<form action="">
Username: <input type="text" name="user" /><br />
Password: <input type="password"
name="password" />
</form>

<p><b>Note:</b> The characters in a password field


are masked (shown as asterisks or circles).</p>

</body>
</html>

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

Radio Button

<html>
<body>

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

<p><b>Note:</b> When a user clicks on a radiobutton, it becomes checked, and all other radio-buttons
with equal name become unchecked.</p>

</body>
</html>

Output:
Male
Female
Note: When a user clicks on a radio-button, it becomes
checked, and all other radio-buttons with equal name
become unchecked.

Check Box
<html>
<body>

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

</body>
</html>

Output:
I have a bike
I have a car

Buttons
<html>
<body>

<form action="">
<input type="button" value="Hello world!">
</form>

</body>
</html>

Textarea

<html>
<body>
<p>
This example cannot be edited
because our editor uses a textarea
for input,
and your browser does not allow
a textarea inside a textarea.
</p>

<textarea rows="10" cols="30">


The cat was playing in the garden.
</textarea>

This example cannot be edited because our editor uses a textarea for input, and your browser
does not allow a textarea inside a textarea.

Drop Down List


<html>
<body>

<form action="">
<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>

Drop-down list with a pre-selected value


<html>
<body>

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

</body>
</html>

</body>
</html>

You might also like