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>
.
form elements
.
</form>

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:

Type	Description
<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:

Example

<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>

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:

Example

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

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

Male
Female
Other

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:

Example

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

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:

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.

Example

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

placeholder

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.

Example

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

Try yourself

<!doctype html>

<html>

<head>

<title> create your Account </title>

</head>

<body>

<br> <br> <br>

<font size="5">

<center><h1> Create Account </h1>

<form >

<fieldset>

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

</fieldset>

</div>

</form>

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

<!doctype html>
	<html>
	<head>
	<title> create your Account </title>
	</head>
	<body>
	<br> <br> <br>
	<font size="5">
	<center><h1> Create Account </h1>


	<form >
	<fieldset>
	<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" />
	</fieldset>
	</div>
	</form> Note:check lesson 8 And9to learn more about forms Elements And Input Types