HTML forms

HTML forms

While other HTML elements give your page markup and style, forms add interactivity. HTML forms are the primary point of interaction between a user and a site. They allow you to take orders, carry out surveys and much more.

How HTML forms work

Forms consist of two parts: HTML markup (what is displayed on the web page) and processing the data on the client (checking the filling of fields, checking the correctness of the information entered, etc.) or the server side (saving the entered data, sending emails, etc.). Processing of form data on the server is usually written in PHP, Ruby on Rails, Perl, Python, Node.js and Java.

Let's take a look at how the form works:

  1. the visitor comes to the page with the form, fills it in and sends it back.
  2. the browser sends data from the form to the server
  3. the server receives the data and passes it to the script for processing
  4. the script processes the data and creates a new HTML page with the response that it sends back to the web server
  5. the web server sends a page with an answer back to the browser
  6. the browser receives the page and displays it

HTML <form> tag

Formally, all form elements must be inside the <form> element:

<form action="myform.php" method="post">
...
form content
...
</form>

The <form> element is a container that is the same as <div> or <span>, but it can also contain attributes that allow you to configure the submit request when the user clicks the Send button. The two most important attributes are action and method.

<input> tag

The most commonly used element in forms is <input>. It allows you to add various elements for data entry to the form. Which data entry element will be displayed on the screen is determined using the type attribute:

type="text"
The value text creates a single-line text field:
<form action="myform.php" method="post">
  <input type="text" name="name">
</form>
Try it »

The name attribute is required for most form elements, since its value is passed to the server and used by server scripts.

Note: the <input> element is empty and does not have a closing tag, so before or after the element, you usually add text (a label) that contains information about what information you want to enter in the current field.

type="submit"
Creates a button, when you click on which the browser sends the form to the server:
<form action="myform.php" method="post">
  <input  type="submit" value="Send">
</form>
The value attribute specifies the text that will be displayed on the button, replacing the default value.
type="radio"
Creates controls that allow you to select only one option from the proposed ones, that is, these controls are interchangeable. They are called radio buttons or switches:
<form action="myform.php" method="post">
  <input type="radio" name="response" value="yes">yes<br>
  <input type="radio" name="response" value="no">no
</form>
Try it »

All radio buttons associated with the specified variant values must have the same name attribute value, but each individual radio button must have a unique value of value attribute.

Note: the <input> element is a inline element, so to display each <input> on a new line, you need to add a <br> tag after each element or place each element in a paragraph (in the <p> tag).

type="checkbox"
Creates control elements that allow users to select any number of options or deselect without selecting any of the suggested values. Such control elements are called flags.
<form action="myform.php" method="post">
  <p><input type="checkbox" name="spice" value="Salt">Salt</p>
  <p><input type="checkbox" name="spice" value="Pepper">Pepper</p>
  <p><input type="checkbox" name="spice" value="Garlic">Garlic</p>
</form>
Try it »

All the flags that belong to the same group must have the same value of the name attribute, but each individual variant must have a unique value of the value attribute.

<textarea> tag

The <textarea> element creates a multi-line text field. If more text is entered in the field than can fit in the text area, a scroll bar appears on the right side. The text between the opening and closing tag will be displayed in the text box as the default value:

<form action="myform.php" method="post">
  <textarea name="comments" rows="10" cols="48">Leave comments here!</textarea>
</form>
Try it »

The name attribute must contain a unique name that will identify this item on the server side. The rows attribute allows you to specify the number of lines that determine the height of the text area, and cols specifies the width of the text area in the characters.

HTML drop down list

The <select> element creates a menu containing a drop-down list. List items are specified using <option> elements, which must be located between the opening and closing tags of the <select> element:

<form action="myform.php" method="post">
  <select name="character">
    <option value="Homer">Homer Simpson</option>
    <option value="Marge">Marge Simpson</option>
    <option value="Bart">Bart Simpson</option>
    <option value="Lisa">Lisa Simpson</option>
    <option value="Maggie">Maggie Simpson</option>
  </select>
</form>
Try it »

<fieldset> and <legend> tags

You can use the <fieldset> element to visualize the related form elements, which adds a border around its child elements:

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

  <input type="radio" name="response" value="yes">yes<br>
  <input type="radio" name="response" value="no">no
  
  <fieldset>
    <p><input type="checkbox" name="spice" value="Salt">Salt</p>
    <p><input type="checkbox" name="spice" value="Pepper">Pepper</p>
    <p><input type="checkbox" name="spice" value="Garlic">Garlic</p>
  </fieldset>
  
</form>
Try it »

The name (title) for such a group of elements can be specified using the <legend> element, which must be the first child element within the <fieldset> element:

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

  <input type="radio" name="response" value="yes">yeslt;br>
  <input type="radio" name="response" value="no">no
  
  <fieldset>
    <legend>Spices</legend>
    <p><input type="checkbox" name="spice" value="Salt">Salt</p>
    <p><input type="checkbox" name="spice" value="Pepper">Pepper</p>
    <p><input type="checkbox" name="spice" value="Garlic">Garlic</p>
  </fieldset>
  
</form>
Try it »

<label> tag

You can add text to form elements by writing it next to the desired element, but for browsers and search engines analyzing the markup of a web page, this will simply be text that does not directly relate to any of the form elements. The <label> element allows you to associate text with a specific form element, such text is called a label.

By default, labels are not visually different from plain text, but they allow you to select form elements by clicking not only on the element itself, but also on its label.

You can associate a label with a form element in two ways: place the entire form element inside the <label> element or by using the for attribute, which takes as its value the identifier of the form element with which to associate the label:

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

  <p><label><input type="radio" name="response" value="yes">yes</label></p>
  <p><label><input type="radio" name="response" value="no">no</label></p>
	
  <p>
    <input type="checkbox" id="spice_salt" name="spice" value="Salt">
	<label for="spice_salt">Salt</label>
  </p>
  <p>
    <input type="checkbox" id="spice_pepper" name="spice" value="Pepper">
	<label for="spice_pepper">Pepper</label>
  </p>
  <p>
    <input type="checkbox" id="spice_garlic" name="spice" value="Garlic">
	<label for="spice_garlic">Garlic</label>
  </p>
  
</form>
Try it »

Labels can be placed both before and after the control element associated with it, because if the value of the for attribute of the <label> element matches the value of the id attribute of the form element, it does not matter where the label is located.

Copying materials from this site is possible only with the permission of the site administration and
when you specify a direct active link to the source.
2011-2018 © puzzleweb.ru

puzinfo@puzzleweb.ru | ruen