Web Development

Course
Javed Iqbal
[email protected]
HTML Class 4
 Previous Class
• HTML Blockquote
• HTML Comment
• HTML Colors
• HTML links, bookmarks, email link, image link
• HTML Lists
• HTML Tables
• HTML Block, Inline Elements
• HTML Class Attributes
• HTML ID Attributes
 HTML Class 4
• HTML <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.
• <form>
.
form elements
.
</form>
 HTML Class 4

• The <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.

• Text Fields
• The <input type="text"> defines a single-line input field for text input.
<form>
  <input type="text" id="fname" name="fname">
</form>
 HTML Class 4
• The <lable> Element
• The <label> tag defines a label for many form elements.

• <label for="fname">First name:</label>

• Radio Button
• The <input type="radio"> defines a radio button.

• Radio buttons let a user select ONE of a limited number of choices.

• <form>

  <input type="radio" id="html" name="fav_language" value="HTML">

  <label for="html">HTML</label><br>

  <input type="radio" id="css" name="fav_language" value="CSS">

  <label for="css">CSS</label><br>

  <input type="radio" id="javascript" name="fav_language" value="JavaScript">

  <label for="javascript">JavaScript</label>

</form>
 HTML Class 4
• Checkboxes
• The <input type="checkbox"> defines a checkbox.
• Checkboxes let a user select ZERO or MORE options of a limited number of choices.

• <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>
 HTML Class 4
• The 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.

• <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>
 HTML Class 4

• The Name Attribute for <input>

• Notice that each input field must have a name attribute to be submitted.
• If the name attribute is omitted, the value of the input field will not be sent at all.
• This example will not submit the value of the "First name" input field: 

• <form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" value="John"><br><br>
  <input type="submit" value="Submit">
</form>
 HTML Class 4
• HTML Form Attributes
• Here we are going to describes the different attributes for the HTML <form> element.

• The 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.

• <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>
 HTML Class 4
• The Target Attribute
• HTML lists allow web developers to group a set of related items in lists.

• The target attribute specifies where to display the response that is received after submitting the form.

• _blank, _self, _parent, etc.

• The Method Attribute

• The method attribute specifies the HTTP method to be used when submitting the form data.

• Get <form action="/action_page.php" method="get">

• Post <form action="/action_page.php" method="post">
 HTML Class 4
• The Autocomplete Attribute
• The autocomplete attribute specifies whether a form should have autocomplete on or off.
• When autocomplete is on, the browser automatically complete values based on values that the user has entered before.

• <form action="/action_page.php" autocomplete="on">

• Novalidate Attribute
• <form action="/action_page.php" novalidate>
 HTML Class 4

• The Select Element

• The <select> element defines a drop-down list:
• <label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

• The <option> elements defines an option that can be selected.

• 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:
• <option value="fiat" selected>Fiat</option>
 HTML Class 4
• Visible Values
• Use the size attribute to specify the number of visible values:

• <label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

• Allow Multiple Values

• Use the multiple attribute to allow the user to select more than one value:
• <select id="cars" name="cars" size="4" multiple>
 HTML Class 4
• The <textarea> Elements
• The <textarea> element defines a multi-line input field (a text area):
• <textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
• The rows attribute specifies the visible number of lines in a text area.
• The cols attribute specifies the visible width of a text area.
• The <button> Elements
• The <button> element defines a clickable button:
• <button type="button" onclick="alert('Hello World!')">Click Me!</button>
 HTML Class 4
• The <fieldset> and <legend> Elements
• The <fieldset> element is used to group related data in a form.
• The <legend> element defines a caption for the <fieldset> element.
<form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <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">
  </fieldset>
</form>
 HTML Class 4
• HTML Input Types
• Here are the different input types you can use in HTML:

• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="time">
• <input type="url">
• <input type="week">
 HTML Class 4
• HTML Input Restrictions Attribute Description
checked Specifies that an input field should be pre-selected when the page loads
• Here is a list of some common input restrictions: (for type="checkbox" or type="radio")
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field