FORMS

Forms
 An HTML form is used to collect user input. The
user input is most often sent to a server for
processing.
 For example, in case you want to collect
information like email, address, credit card
details from user
 A form generally takes user input from front end
and post it to backend applications such as ASP
script
Elements in forms
Some of the elements in the forms include
 Text fields  Links
 Select Menus  Tabular data &
 Check boxes & Radio  Footer
Buttons
 Text Areas and Buttons
 Headers
 Callouts
 Image Insertion
 Text Insertion
Form attributes
 Most commonly used FORM element Attributes

Attribute Description
method Specifies the HTTP method used when submitting the form

action Specifies an address (url) where to submit the form

autocomplete Specifies if the browser should autocomplete the form
novalidate Specifies that the browser should not validate the form.

name Specifies a name used to identify the form

Input Element
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on
the type attribute. Here are some examples:
Select Menus
<select> tag presents a drop-down list with choices indicated by the
<option> tags
Include NAME attribute

By default, the first item in the drop-down list is selected.

To define a pre-selected option, add the selected attribute to the option
Change the number of list options visible by including the SIZE = “x” attribute
inside the <SELECT> tag
x number of options visible
Use the multiple attribute to allow the user to select more than one value:
if you use multiple attribute, you should also assign different values for each of
the value attributes of option tags

6
7.2 FormList
Elements
Box - <select>,<option>

Example

<select name="cars">
<option selected>BMW</option>
<option>Mercedes</option>
<option>Audi</option>
</select>

Result

7
Text Box
 Text boxes allow the users to enter a single-line text.
 Default width of a text field is 20 characters.
Example

First name: <input type="text" name="fname"

size="25"><br>
Last name: <input type="text" name="lname" size="25">

Result
Label
 The <label> tag defines a label for an <input> element.
 The <label> element does not render as anything special for
the user. However, it provides a usability improvement for
mouse users, because if the user clicks on the text within the
<label> element, it toggles the control.
 The for attribute of the <label> tag should be equal to the id
attribute of the related element to bind them together.
 A label can be bound to an element either by using the "for"
attribute, or by placing the element inside the <label> element.
Label
 The <label> tag defines a label for an <input> element.
 The <label> element does not render as anything special for
the user. However, it provides a usability improvement for
mouse users, because if the user clicks on the text within the
<label> element, it toggles the control.
 The for attribute of the <label> tag should be equal to the id
attribute of the related element to bind them together.
 A label can be bound to an element either by using the "for"
attribute, or by placing the element inside the <label> element.
Password boxes
 Password boxes are like text boxes, except the characters in
a password field are automatically masked. (shown
as asterisks or circles)
Example
User Name:<br>
<input type="text" name="username"><br>
Password:<br>
<input type="password" name="pswd">

Result
Select Menu
 A dropdown menu, also known as a select menu, is used in
forms to let users choose one or more options from a
predefined list. The <select> element is used to create
dropdown menus, and each option inside it is defined using the
<option> tag.
Example
<label for="country">Choose a country:</label>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="uk">UK</option>
/select>
Result
Radio Buttons
 Usually found in a group of options, only one radio button
in a group can be selected at a time.
 Selecting one radio button deselects the others in its group.
 Each radio button within a group should have the same name
and different values. (Otherwise, browsers cannot distinguish
between them)
 CHECKED attribute indicates which radio button is selected
initially
Example
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"
checked>Female<br>
Result

http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229 13
Checkboxes
 Check boxes let a user select NONE/ONE/MORE options of a
limited number of choices.
 Each check box within a group should have the same name and
different values. (Otherwise, browsers cannot distinguish between
them)
 CHECKED attribute indicates initially selected checkboxe/s.
Example

<input type="checkbox" name="choice" value="cb1" checked>Love

<br>
<input type="checkbox" name="choice" value="cb2">Cash <br>
<input type="checkbox" name="choice" value="cb3"
checked>Education <br>
Result

14
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 (form-handler) defined in the action attribute usually
does something with the received input. (include script for
processing input data).
 VALUE attribute changes the text displayed on the button
(default is “Submit”).

15
Submit Button
Example

<form name="input" action="html_form_action.asp" method="get">

Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

Result

If you type some characters in the text field above, and click
the "Submit" button, the browser will send your input to a page
called "html_form_action.asp".

16
Reset Button
 A reset button is used to clear all the entries user entered into
the form and reset the form-data to its default values.
 VALUE attribute changes the text displayed on the button
(default is “Reset”)

Example
<form name="input" action="html_form_action.asp" method="get">
<P>Username: <input type="text" name="user" size="25"></P>
<P>Password: <input type="password" name="pswd" size="25"></P>
<P><input type="submit" value="Submit">
<input type="reset" value="Reset"></P></form>
Result

17
Button
 The <button> element defines a clickable button

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

Result

18
Text Area
 Inserts a scrollable text box into FORM for entering multi-line
text.
 It is commonly used in situations where you ask for info that
may require multiple sentences.
 You control the dimension of the text area by using the ROWS
and COLS attributes.
 The rows attribute specifies the visible number of lines in a
text area.
 The cols attribute specifies the visible width of a text area.

19
 Text Area

Example

<textarea name="message" rows="5" cols="30">

Doğu Akdeniz Üniversitesi
Gazimağusa, Kuzey Kıbrıs
Mersin 10, Turkey
</textarea>

Result
7.2 Form Elements - <textarea>

20
7.2 FormList
Elements
Box - <select>,<option>

Example

<select name="colors" size="3" multiple>

<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="purple">Purple</option>
</select>
Result

21
Grouping Fields
The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset>
element.
Example
<fieldset><legend>Personal Information:</legend>
Name:<br>
<input type="text" name="firstname" value="your first
name"><br>
Surname:<br>
<input type="text" name="lastname" value="your last name">
</fieldset>
Result

22
Headers
 A header can contain heading <h1>-<h6>

Example
<header>
<h1>Main page heading here</h1>
<p>Posted by Geetha</p>
</header>

Result

23
Callouts
 A callout message is often positioned at the bottom of a page to
notify the user about something special: tips/tricks, discounts,
action needed, other.
Example
<div class="callout">
<div class="callout-header">Callout Header</div>
<span class="closebtn" onclick="this.parentElement.style.display='none';">&times;<
/span>
<div class="callout-container">
<p>Some text...</p>
</div>
</div>
Result

24
Image Insertion
 In the forms, images can be added to enhance the information

Example
<img src="image.jpg" alt="A sample image" width="300">

Result

25
Link Insertion
 In the forms,hyperlinks can be added through <a> tag with href
attribute
Example
<a href="http://www.google.com">click here</a>

Result

26
Footer
 The <footer> tag defines a footer for a document or section.
A <footer> element typically contains:
authorship information
copyright information
contact information
sitemap
back to top links
related documents

27
Footer
<footer>
<p>Author: Geetha</p>
<p><a href="mailto:[email protected]">
[email protected] </a></p>
</footer>

Output

28
Thank You !!!

29