× Introduction HTML Editors Web Components Headings Paragraph Attributes Entities Images Comments Formatting Links File Paths Book Marks Image Links Unordered Lists Ordered Lists Tables Forms Other Form Elements Semantic tags Media Div and Span Examples Projects eBooks





☰







HTML Forms

In this tutorial you will learn how to collect user inputs by create a form in HTML.

HTML Form

Web page forms are built from HTML elements to collect user inputs like user name, user address, contact phone number, email address etc.

Forms contain HTML elements like inputbox, text areas, checkboxes, radio-buttons, submit buttons, etc. Users generally complete a form by entering text, selecting items, etc. and submitting this form to a web server for further processing.

Form elements are enclosed between <form></form> tags. Each opening<form> tag should include a method attribute, specifying which HTTP methodis to be used to submit the form, and an action attribute specifying the URL ofa server-side script that is to be used to process the submitted data.

The method attribute can be assigned values of “GET” or “POST”.Submission via the preferred GET method appends the data to the URL,whereas submission via the POST method encodes the data differently andcan be used when the GET method fails.

Form Attributes:

The Action Attribute

The action attribute defines the action to be performed when the form is submitted, which usually leads to a script that collects the information submitted and works with it. if you leave it blank, it will send it to the same file.

<form action="action.php">

The Method Attribute

The method attribute is used to define the HTTP method of the form which is either GET or POST.

<form action="action.php" method="get">
<form action="action.php" method="post">

The GET method is mostly used to get data, for example to receive a post by its ID or name, or to submit a search query. The GET method will append the form data to the URL specified in the action attribute.

www.example.com/action.php?firstname=Mickey&lastname=Mouse

The POST method is used when submitting data to a script. The POST method does not append the form data to the action URL but sends using the request body.

Example:   Try It

<form method="GET" action="login.php">
<label>Username: <input type="text"></label>
<label>Password: <input type="password"></label>
<input type="submit"value="Submit">
</form>

Result:


Input Element Try It

HTML input element users specify various types of user input fields, depending on the type attribute. An input element can be of type text field, password field, checkbox, radio button, submit button, reset button etc.

Example:

<input type="text">

Name Attribute

The name attribute specifies the name of an <input> element.The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted.

Example:

<input type="text" name="username">

Input Types:

Input types prohibit submission of the form if the user enters a value that isnot permitted and issue an error notice. Some also provide special controls that allow the user to easily select a permitted value.

Input Type - Permitted input

  • text- String of text
  • password- String of text (obscured by browser)
  • url-Valid URL protocol and domain address
  • email- Valid email address
  • date- Date in mm/dd/yyyy format
  • month- Month and year
  • week- Week number and year
  • time- Time in HH:MM format
  • datetime-local Date and time as mm-dd-yy HH:MM
  • number- Numeric integer value
  • range- Numeric integer value (slider)
  • color-Color in #RRGGBB hexadecimal format
  • file- File path address (browse)

Input Element Attributes: Try It

  • size – the width of the text box in average character widths.
  • minlength and maxlength – permissible number of characters.
  • min and max – permissible range of numeric values.
  • placeholder – provides a data entry hint to the user.
  • readonly – the default value in the text box cannot be changed.
  • disabled – the text box is grayed out and will not be submitted.
  • name – Name of the input. This is required to submit the data from the form to the server.
  • id – id of the input. This is required to apply styles and scripts.
  • Required – It enforces to the user to complete the field.
  • autofocus – The input field automatically get focus when the page loads.

Practice exercise:

1.Write an html code to display the web page as follows. View


SRIREP Registration Form














2.Write an html code to display the web page as follows. View


Sri Hari Book Store

Book Order Form