Second Year - 1st Semester Web Programming Assist. Lect.

Eman Karim

Lecture 2: HTML Audio, Video, Tables and Forms

HTML Audio

The <audio> tag is used to embed sound content in a document, such as music
or other audio streams.
There are three supported audio formats in HTML: MP3, WAV, and OGG.

Example:

HTML Video

The <video> tag is used to embed video content in a document, such as a movie
clip or other video streams.
There are three supported video formats in HTML: MP4, WebM, and OGG.

Example:

1
Second Year - 1st Semester Web Programming Assist. Lect. Eman Karim

HTML Table

 The <table> tag defines an HTML table.

 Each table row is defined with a <tr> tag.
 Each table header is defined with a <th> tag.
 Each table data/cell is defined with a <td> tag.
 By default, the text in <th> elements are bold and centered.
 By default, the text in <td> elements are regular and left-aligned.
 To add a caption to a table, use the <caption> tag.
Example:

<table style="width:100%">
<caption>Table of Monthly Savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>

2
Second Year - 1st Semester Web Programming Assist. Lect. Eman Karim

HTML Forms

An HTML form is used to collect user input. The user input is most often sent to
a server for processing.

 The <form> Element

The HTML <form> element is used to create an HTML form for user input:
The <form> element is a container for different types of input elements, such
as: text fields, checkboxes, radio buttons, submit buttons, etc.

 The <label>Element

The <label> element defines a label for several form elements.

The for attribute of the <label> tag should be equal to the id attribute of the
<input> element to bind them together.

 The <input>Element

The HTML <input> tag is the most used form element. An <input> element can
be displayed in many ways, depending on the type attribute. Below are some of
its types:
A. Text
The <input type="text"> defines a single-line input field for text input.
Example:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br>
<label for="none">Disabled text:</label><br>
<input type="text" id="none" name="none" disabled >
</form>
3
Second Year - 1st Semester Web Programming Assist. Lect. Eman Karim

B. Password
<input type="password"> defines a password field.
Example:

<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" maxlength="5"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>

C. Radio Buttons
The <input type="radio"> defines a radio button. It let a user select ONE of a
limited number of choices.
Example:

<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
</form>

D. Checkboxes
 The <input type="checkbox"> defines a checkbox.
 Checkboxes let a user select ZERO or MORE options of a limited number of
choices.

4
Second Year - 1st Semester Web Programming Assist. Lect. Eman Karim

Example:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

E. Submit Button
 The <input type="submit"> defines a button for submitting the form data to
a form-handler.
 The form-handler is typically a file on the server with a script for processing
input data.
 The form-handler is specified in the form's action attribute.
 The action attribute defines the action to be performed when the form is
submitted. Usually, the form data is sent to a file on the server when the user
clicks on the submit button.
Example:

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

5
Second Year - 1st Semester Web Programming Assist. Lect. Eman Karim

F. Reset
<input type="reset"> defines a reset button that will reset all form values to
their default values.
Example:

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>

G. Color
The <input type="color"> is used for input fields that should contain a color.

Example:

6
Second Year - 1st Semester Web Programming Assist. Lect. Eman Karim

H. Date
The <input type="date"> is used for input fields that should contain a date.

Example:

You can also use the min and max attributes to add restrictions to dates:
Example:

I. Time
The <input type="time"> allows the user to select a time.
Example:

7
Second Year - 1st Semester Web Programming Assist. Lect. Eman Karim

J. Email
The <input type="email"> is used for input fields that should contain an email
address.
Example:

K. File
The <input type="file"> defines a file-select field and a "Browse" button for file
uploads.
Example:

L. Number
The <input type="number"> defines a numeric input field. You can also set
restrictions on what numbers are accepted.
Example:

8
Second Year - 1st Semester Web Programming Assist. Lect. Eman Karim

M. Button
The <button> element defines a clickable button.
Example:

<form>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
</form>

 The <select> Element

The <select> element defines a drop-down list. The <option> elements defines
an option that can be selected. By default, the first item in the drop-down list
is selected.
Example:

<form>
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value=" Mercedes "> Mercedes </option>
<option value="BMW">BMW</option>
<option value="Audi">Audi</option>
</select>
</form>

9
Second Year - 1st Semester Web Programming Assist. Lect. Eman Karim

 The <datalist> Element

The <datalist> element specifies a list of pre-defined options for an <input>
element.
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of the <input> element, must refer to the id attribute of the
<datalist> element.

Example:

<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit" value="Submit">
</form>

10