Professional Documents
Culture Documents
Lecture 2 HTML Audio, Video, Tables and Forms
Lecture 2 HTML Audio, Video, Tables and Forms
Eman Karim
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
<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 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 <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>
<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
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