Session 1 Chapter 10 - How to Work with Forms ITI 134: HTML5 Desktop and Mobile Level II .
Introduction to Forms and HTML5 Controls · 2020-02-25 · Forms provide the user with an...
25
Introduction to Forms and HTML5 Controls Lecture 5
Transcript of Introduction to Forms and HTML5 Controls · 2020-02-25 · Forms provide the user with an...
Introduction to Forms
and HTML5 Controls
Lecture 5
Outline
▰ Web Forms..
▰ Creating an HTML Form..
▰ Web Form Control..
2
▰ Forms provide the user with an alternative way to interact with a web server.
▰ Web forms are present on virtually every website to you have ever visited:
search engine site, social media sites, e-commerce sites, college and
university website and many more.
▰ One particular type of web form that is found on every large web site is
search form or search bar.
3
Web Forms
▰ Web form is created with a HTML element that contain objects called form
control
▰ Web page can have multiple form, but a form cannot be nested within
another form.
▰ Each form in the page is a separate entity.
4
Web Forms
▰ A HTML form created with the <form> and </form> element.
▰ The form contains form controls witch users can:
➢ Enter data.
➢ Make selection from list
➢ Click radio button.
➢ Enter text in a text area box.
5
HTML Forms
<FORM> element
▰ Two essential features of any form, namely the action
and the method attributes.
▰ The action attribute specifies the URL of the server-
side resource that will process the form data
▰ The method attribute specifies how the query string
data will be transmitted from the browser to the server.
6
GET vs POST (methods)
7
GET vs POST
GET
▰ Data can be clearly seen in the address bar.
▰ Data remains in browser history and cache.
▰ Data can be bookmarked
▰ Limit on the number of characters in the form data returned.
POST
▰ Data can contain binary data.
▰ Data is hidden from user.
▰ Submitted data is not stored in cache, history, or bookmarks.
8
Example
9
<!DOCTYPE html>
<html>
<body>
<h2>Text Input</h2>
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
<p>Note that the default width of a text input field is 20
characters.</p>
</body>
</html>
Web Form Control
▰ Web form are not used just for performing a search; they are often used to collect visitor
information.
11
Type of Web Form Controls
Example for input text and Submit, Reset Buttons
12
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page
called "/action_page.php".</p>
</body>
</html>
Example for Radio Button Input
13
<!DOCTYPE html>
<html>
<body>
<h2>Radio Buttons</h2>
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
</body>
</html>
14
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
Live Demo
<form>
<select name = "dropdown">
<option value = "Maths" >Maths</option>
<option value = "Physics“ selected >Physics</option>
</select>
</form>
</body>
</html>
Example for Select List Input
15
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
Live Demo
<form>
<input type = "file" name = "fileupload" accept = "image/*">
</form>
</body>
</html>
Example for File Upload Input
Example for fieldset
16
<!DOCTYPE html>
<html>
<body>
<h2>Grouping Form Data with Fieldset</h2>
<p>The fieldset element is used to group related data in a
form, and the legend element defines a caption for the fieldset
element.</p>
<form action="/action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname"
value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname"
value="Mouse">
<br><br>
<input type="submit“ value="Submit">
</fieldset>
</form>
</body>
</html>
17
Example for fieldset
HTML5 Controls
▰ The controls attribute is new in HTML5.
▰ This attribute is specifically intended for HTML5 <audio> and <video>
elements.
▰ The HTML5 controls attribute when used on either <audio> or <video>
element, it adds few controls on the browser. The controls added are
play/pause, volume , seeking and mute/ unmute. A full screen button
will be added for video and CC, track buttons if the author provides.
18
19
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<p><strong>Note:</strong> The video tag is not supported in
Internet Explorer 8 and earlier versions.</p>
</body>
</html>
Example for A <video> element
20
How it Works?
▰ The controls attribute adds video controls, like play, pause, and
volume.
▰ The <source> element allows you to specify alternative video files
which the browser may choose from.
▰ The browser will use the first recognized format.
▰ The text between the <video> and </video> tags will only be displayed
in browsers that do not support the <video> element.
21
Example for A <video> element
22
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<p><strong>Note:</strong> The video tag is not supported in
Internet Explorer 8 and earlier versions.</p>
</body>
</html>
Example for A <video> element with
autoplay
23
Example for A <video> element with
autoplay
24
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Example for A <Audio> element
25
How it Works?
▰ The <source> element allows you to specify alternative audio files
which the browser may choose from.
▰ The browser will use the first recognized format.
▰ The text between the <audio> and </audio> tags will only be displayed
in browsers that do not support the <audio> element.
![HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]](https://static.fdocuments.net/doc/165x107/54c70c8c4a79593f288b465a/html5-semantics-accessibility-forms-carsonified-html5-online-conference.jpg)
