Introducing Forms
BY SYEDA ROSHNI AHMED
Objective
•Introducing Form
•Form control elements
HTML Forms
•Forms provide the user with an alternative
way to interact with a web server.
• Forms provide rich mechanisms like:
• Text input
• Password input
• Options Lists
• Radio and check boxes
Form Structure
How forms interact with servers
Query Strings
URL encoding
GET vs POST
GET vs POST
GET POST
• Data can be clearly • Data can contain
seen in the address binary data.
bar.
• Data remains in
• Data is hidden from
user.
browser history and
cache. • Submitted data is not
• Data can be stored in cache,
bookmarked history, or bookmarks.
• Limit on the number of
characters in the form
Forms Control Elements
Type Description
<button> Defines a clickable button.
<datalist> An HTML5 element form defines lists to be used with other form
elements.
<fieldset> Groups related elements in a form together.
<form> Defines the form container.
<input> Defines an input field. HTML5 defines over 20 different types of input.
<label> Defines a label for a form input element.
<legend> Defines the label for a fieldset group.
<option> Defines an option in a multi-item list.
<optgroup> Defines a group of related options in a multi-item list.
<select> Defines a multi-item list.
<textarea> Defines a multiline text entry box.
Text Input Controls
Type Description
text Creates a single line text entry box. <input type="text" name="title" />
textarea Creates a multiline text entry box. <textarea rows="3" ... />
password Creates a single line text entry box for a password <input type="password" ... />
search Creates a single-line text entry box suitable for a search string. This is an HTML5
element.
<input type="search" … />
email Creates a single-line text entry box suitable for entering an email address. This is an
HTML5 element.
<input type="email" … />
tel Creates a single-line text entry box suitable for entering a telephone. This is an
HTML5 element.
<input type="tel" … />
url Creates a single-line text entry box suitable for entering a URL. This is an HTML5
element.
Text Input Controls
Text Input Controls
HTML5 advanced controls
Pattern attribute
Datalist
Select Lists
Radio Buttons
•Used to select one item from a small list
Checkboxes
QUIZ
