Techvideoguru O level practical notes html

What is HTML Form

HTML Forms are required to collect different kinds of user inputs, such as contact details like
name, email address, phone numbers, or details like credit card information, etc.

Forms contain special elements called controls like inputbox, checkboxes, radio-buttons, submit
buttons, etc. Users generally complete a form by modifying its controls e.g. entering text, selecting
items, etc. and submitting this form to a web server for processing.

The <form> tag is used to create an HTML form. Here's a simple example of a login form:

Example
Try this code »

1. <form>
2. <fieldset>
3. <legend>Log In</legend>
4. <label>Username: <input type="text"></label>
5. <label>Password: <input type="password"></label>
6. <input type="submit" value="Submit">
7. </fieldset>
8. </form>
The following section describes different types of controls that you can use in your form.

Input Element
This is the most commonly used element within HTML forms.

It allows you to specify various types of user input fields, depending on the type attribute. An
input element can be of type text field, checkbox, password field, radio button, submit button, reset
button, etc. and several new input types introduced in HTML5.

The most used input types are described below.

Text Fields
Text fields are one line areas that allow the user to input text.

Single-line text input controls are created using an <input> element, whose type attribute has a
value of text. Here's an example of a single-line text input used to take username:

Example
Try this code »

1. <form>

FACEBOOK.COM/TECHVIDEOGURU WEBSITE:-WWW.TECHVIDEOGURU.MOBI YOUTUBE.COM/TECHVIDEOGURU

 Techvideoguru O level practical notes html
2. <label for="username">Username:</label>
3. <input type="text" name="username" id="username">
4. </form>
— The output of the above example will look something like this:

Note: The <label> tag to define labels for <input> elements. If you want your user to enter
several lines you should use a <textarea> instead.

Password Field
Password fields are similar to text fields. The only difference is; characters in a password field are
masked i.e. shown as asterisks or dots. This is to prevent others from reading the password on the
screen. This is also a single-line text input controls created using an <input> element
whose typeattribute has a value of password.

Here's an example of a single-line password input used to take user password:

Example
Try this code »

1. <form>
2. <label for="user-pwd">Password:</label>
3. <input type="password" name="user-password" id="user-pwd">
4. </form>
— The output of the above example will look something like this:

Radio Buttons
Radio buttons are used to let the user select exactly one option from a pre-defined set of options.
It is created using an <input> element whose type attribute has a value of radio.

Example
Try this code »

FACEBOOK.COM/TECHVIDEOGURU WEBSITE:-WWW.TECHVIDEOGURU.MOBI YOUTUBE.COM/TECHVIDEOGURU

 Techvideoguru O level practical notes html
1. <form>
2. <input type="radio" name="sex" id="male">
3. <label for="male">Male</label>
4. <input type="radio" name="sex" id="female">
5. <label for="female">Female</label>
6. </form>
— The output of the above example will look something like this:

Note: If you want to allow your user to select more than one option at the same time you should
use the check boxes instead.

Checkboxes
Checkboxes allows the user to select one or more option from a pre-defined set of options. It is
created using an <input> element whose type attribute has a value of checkbox.

Example
Try this code »

1. <form>
2. <input type="checkbox" name="sports" id="soccer">
3. <label for="soccer">Soccer</label>
4. <input type="checkbox" name="sports" id="cricket">
5. <label for="cricket">Cricket</label>
6. <input type="checkbox" name="sports" id="baseball">
7. <label for="baseball">Baseball</label>
8. </form>
— The output of the above example will look something like this:

File Select box

The file fields allow a user to browse for a local file and send it as an attachment to the form data.
It normally rendered as a text box with a button that enables the user to browse for a file.
However, the user can also type the path and name of the file in the text box.

FACEBOOK.COM/TECHVIDEOGURU WEBSITE:-WWW.TECHVIDEOGURU.MOBI YOUTUBE.COM/TECHVIDEOGURU

 Techvideoguru O level practical notes html

This is also created using an <input> element, whose type attribute value is set to file.

Example
Try this code »

1. <form>
2. <label for="file-select">Upload:</label>
3. <input type="file" name="upload" id="file-select">
4. </form>
— The output of the above example will look something like this:

Textarea
Textarea is a multiple-line text input control that allows a user to enter more than one line of text.
Multi-line text input controls are created using an <textarea> element.

Example
Try this code »

1. <form>
2. <label for="address">Address:</label>
3. <textarea rows="3" cols="30" name="address" id="address"></textarea>
4. </form>
— The output of the above example will look something like this:

Select Boxes
A select box is a dropdown list of options that allows user to select one or more option from a
pull-down list of options. Select box is created using the <select> element
and <option> element. The option elements within the <select> element define each list item.

FACEBOOK.COM/TECHVIDEOGURU WEBSITE:-WWW.TECHVIDEOGURU.MOBI YOUTUBE.COM/TECHVIDEOGURU

 Techvideoguru O level practical notes html

Example
Try this code »

1. <form>
2. <label for="city">City:</label>
3. <select name="city" id="city">
4. <option value="sydney">Sydney</option>
5. <option value="melbourne">Melbourne</option>
6. <option value="cromwell">Cromwell</option>
7. </select>
8. </form>
— The output of the above example will look something like this:

Submit and Reset Buttons

A submit button is used to send the form data to a web server. When submit button is clicked the
form data is sent to the file specified in the form's action attribute to process the submitted data.
A reset button resets all the forms control to default values.

Example
Try this code »

1. <form action="action.php" method="post" id="users">

2. <label for="first-name">First Name:</label>
3. <input type="text" name="first-name" id="first-name">
4. <input type="submit" value="Submit">
5. <input type="reset" value="Reset">
6. </form>
— The output of the above example will look something like this:

Type your name in the text field above, and click on submit button to see it in action.

FACEBOOK.COM/TECHVIDEOGURU WEBSITE:-WWW.TECHVIDEOGURU.MOBI YOUTUBE.COM/TECHVIDEOGURU

 Techvideoguru O level practical notes html

Answer question no 2 this video

<form>

<label for="username">Name:</label>

<input type="text" name="username" id="username">

</form>

<form>

<label for="address">Address:</label>

<textarea rows="3" cols="30" name="address" id="address"></textarea>

</form>

<form>

<label for="username">City:</label>

<input type="text" name="username" id="city"></form>

<form>

<label for="username">State:</label>

<input type="text" name="username" id="username"></form>

<form>

<label for="username">Pincode:</label>

<input type="text" name="username" id="username"></form>

<form>

<label for="username">magzanine:</label>

<input type="checkbox" name="sports" id="soccer">

<label for="soccer">it tools</label>

<input type="checkbox" name="sports" id="cricket">

FACEBOOK.COM/TECHVIDEOGURU WEBSITE:-WWW.TECHVIDEOGURU.MOBI YOUTUBE.COM/TECHVIDEOGURU

 Techvideoguru O level practical notes html

<label for="cricket">internet</label>

<input type="checkbox" name="sports" id="baseball">

<label for="baseball">c language</label>

<input type="checkbox" name="sports" id="baseball">

<label for="baseball">ict</label>

<input type="checkbox" name="sports" id="baseball">

<label for="baseball">multimedia</label>

</form

<form>

<label for="city">subscription:</label>

<select name="city" id="city">

<option value="sydney">1</option>

<option value="melbourne">2</option>

</select>

</form>

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

</form>

5 24 22 5 10 23 24 11 10 22 24
FACEBOOK.COM/TECHVIDEOGURU WEBSITE:-WWW.TECHVIDEOGURU.MOBI YOUTUBE.COM/TECHVIDEOGURU