With HTML you can create your own Web site. This tutorial teaches you everything about HTML. HTML is easy to learn - You will enjoy it.

1. www.afghanhost.af - info@afghanhost.af
Instructor: Mohammad Rafi Haidari27-May-2014
HTML (Day 4)
 Forms and Input
 Iframes

2. HTML Forms and Input
HTML forms are used to pass data to a server.
An HTML form can contain input elements like
o Text Fields
o Checkboxes
o Radio-buttons
o Submit buttons
and more. A form can also contain
o Select lists,
o Textarea
o Fieldset
o Legend,
The <form> tag is used to create an HTML form:
<form>
.
input
elements
.
</form>

3. HTML Input Element
The most important form element is the <input> element.
The <input> element is used to select user information.
An <input> element can vary in many ways, depending on the type attribute.
An <input> element can be of type text field, checkbox, password, radio
button, submit button, and more.
The most common input types are described below.
Text Fields
<input type="text"> defines a one-line input field that a user can enter text
into:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

4. HTML Input Element
Password Field
<input type="password"> defines a password field:
<form>
Password: <input type="password" name="pwd">
</form>
Radio Buttons
<input type="radio"> defines a radio button. Radio buttons let a user select
ONLY ONE of a limited number of choices:
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

5. HTML Input Element
Checkboxes
<input type="checkbox"> defines a checkbox. Checkboxes let a user select
ZERO or MORE options of a limited number of choices.
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
Submit Button
<input type="submit"> defines a submit button.
A submit button is used to send form data to a server. The data is sent to the
page specified in the form's action attribute. The file defined in the action
attribute usually does something with the received input:
<form name=“input” action=“test.php” method=“post”>
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

6. HTML <textarea> Tag
Definition and Usage
The <textarea> tag defines a multi-line text input control.
A text area can hold an unlimited number of characters, and the text renders in
a fixed-width font (usually Courier).
The size of a text area can be specified by the cols and rows attributes, or even
better; through CSS' height and width properties.
<textarea rows="4" cols="50">
At w3schools.com you will learn how to make a website. We offer free
tutorials in all web development technologies.
</textarea>

7. HTML <fieldset> Tag
The <fieldset> tag is used to group related elements in a form.
The <fieldset> tag draws a box around the related elements.
The <fieldset> tag is supported in all major browsers.
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>

8. HTML <select> Tag
The <select> element is used to create a drop-down list.
The <option> tags inside the <select> element define the available options in
the list.
The <select> tag is supported in all major browsers
<select>
<optgroup label=“Provinces">
<option value=“Herat”> Herat </option>
<option value=“Kabul”> Kabul </option>
<option value=“Mazar”> Mazar </option>
<option value=“Kandahar”> Kandahar </option>
</optgroup>
</select>
multiple options can be selected at once
<multiple>

9. HTML Iframes
Syntax for adding an iframe:
<iframe src="URL"></iframe>
Iframe - Set Height and Width
The height and width attributes are used to specify the height and width of the
iframe.
The attribute values are specified in pixels by default.
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
Iframe - Remove the Border
The frameborder attribute specifies whether or not to display a border around
the iframe.
Set the attribute value to "0" to remove the border:
<iframe src="demo_iframe.htm" frameborder="0"></iframe>