Html form(7th Lesson)

7th Lesson

  HTML Forms

The <form> Element

 The HTML <form> element defines a form that is used to collect user input:

form elements

An HTML form contains form elements.
Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.

The <input> Element

  The <input> element is the most important form element.

The <input> element can be displayed in several ways, depending on the type attribute.
Here are some examples:
<input type="text">Defines a one-line text input field
<input type="radio">Defines a radio button (for selecting one of many choices)
<input type="submit">Defines a submit button (for submitting the form)
You will learn a lot more about input types later in this tutorial.

Text Input

  <input type="text"> defines a one-line input field for text input:


  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
This is how it will look like in a browser:
First name:

Last name:

Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.

Radio Button Input

<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices:


  <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

This is how the HTML code above will be displayed in a browser:

The Submit Button

<input type="submit"> defines a button for submitting the form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:


<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">

This is how the HTML code above will be displayed in a browser:

First name:

Last name:

The Action Attribute

he action attribute defines the action to be performed when the form is submitted.
Normally, the form data is sent to a web page on the server when the user clicks on the submit button.
In the example above, the form data is sent to a page on the server called "/action_page.php". This page contains a server-side script that handles the form data:

<form action="/action_page.php">
If the action attribute is omitted, the action is set to the current page.

Grouping Form Data with <fieldset>

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>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>


The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).
The short hint is displayed in the input field before the user enters a value.

Note: The placeholder attribute works with the following input types: text, search, url, tel, email, and password.


<form action="/action_page.php">
  <input type="text" name="fname" placeholder="First name"><br>
  <input type="text" name="lname" placeholder="Last name"><br>
  <input type="submit" value="Submit">

Note:check lesson 8 And9to learn more about forms Elements And Input Types 

Try yourself

<!doctype html>
<title> create your Account </title>
<br> <br> <br>
<font size="5">
<center><h1> Create Account </h1>
<form >
<legend>sign up</legend>
<div align="center">
Username *: <input type="username" name="username"placeholder="username" /><br />
Password *: <input type="password" name="pwd" /><br />
Surname *: <input type="surname" name="surname" /><br />
Other Names *: <input type="other names" name="names" /><br />
Date of Birth *: <input type="date of birth" name="dob" /><br />
Email *: <input type="email" name="email" /><br />
Telephone: <input type="telephone" name="tel" /><br />
Address *: <input type="address" name="add" /><br />
Post Code *: <input type="postcode" name="ptc" /><br />
<input type="submit" value="Submit" />

Note:check lesson 8 And9to learn more about forms Elements And Input Types