HTML – Forms

Introduction

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.

For Examples :

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

Attribute Values

ValueDescription
buttonDefines a clickable button (mostly used with a JavaScript to activate a script)
checkboxDefines a checkbox
colorDefines a color picker
dateDefines a date control (year, month, day (no time))
datetime-localDefines a date and time control (year, month, day, time (no timezone)
emailDefines a field for an e-mail address
fileDefines a file-select field and a “Browse” button (for file uploads)
hiddenDefines a hidden input field
imageDefines an image as the submit button
monthDefines a month and year control (no timezone)
numberDefines a field for entering a number
passwordDefines a password field
radioDefines a radio button
rangeDefines a range control (like a slider control)
resetDefines a reset button
searchDefines a text field for entering a search string
submitDefines a submit button
telDefines a field for entering a telephone number
textDefault. Defines a single-line text field
timeDefines a control for entering a time (no timezone)
urlDefines a field for entering a URL
weekDefines a week and year control (no timezone)

The Action Attribute

The 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=”/Page1.html“>

If the action attribute is omitted, the action is set to the current page.

The Target Attribute

The target the attribute specifies if the submitted result will open in a new browser tab, a frame, or in the current window.

The default value is_selfwhich means the form will be submitted in the current window.

To make the form result open in a new browser tab, use the value _blank :

<!DOCTYPE html>
<html>
<body>
<h2>The target Attribute</h2>
<p>When submitting this form, the result will be opened in a new browser tab:</p>
<form action="/Page1.html" target="_blank">
  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> 
</body>
</html>

Output :-

image 8

The Method Attribute

The method the attribute specifies the HTTP method (GET or POST) to be used when submitting the form data:

<!DOCTYPE html>
<html>
<body>
<h2>The method Attribute</h2>
<p>This form will be submitted using the GET method:</p>
<form action="/Page1.html" target="_blank" method="GET">
  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>
<p>After you submit, notice that the form values is visible in the address bar of the new browser tab.</p>
</body>
</html>

When to Use GET?

The default method when submitting form data is GET.

However, when GET is used, the submitted form data will be visible in the page address field:

/action_page.php?firstname=Mickey&lastname=Mouse

When to Use POST?

Always use POST if the form data contains sensitive or personal information. The POST method does not display the submitted form data in the page address field.

The Name Attribute

Each input field must have a name attribute to be submitted.

If the name attribute is omitted, the data of that input field will not be sent at all.

Additional attributes Section

In addition to the attributes that operate on all <input> elements regardless of their type, email inputs support the following attributes:

AttributeDescription
maxlengthThe maximum number of characters the input should accept
minlengthThe minimum number of characters long the input can be and still be considered valid
multipleWhether or not to allow multiple, comma-separated, e-mail addresses to be entered
patternA regular expression the input’s contents must match in order to be valid
placeholderAn exemplar value to display in the input field whenever it is empty
readonlyA Boolean attribute indicating whether or not the contents of the input should be read-only
sizeA number indicating how many characters wide the input field should be
spellcheckControls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used

HTML <textarea>

<!DOCTYPE html>
<html>
<body>
<form action="/Page1.html" id="usrform">
  Name: <input type="text" name="usrname">
  <input type="submit">
</form>
<br>
<textarea rows="4" cols="50" name="comment" form="usrform">
Enter text here...</textarea>
<p>The text area above is outside the form element, but should still be a part of the form.</p>
<p><b>Note:</b> The form attribute is not supported in IE.</p>
</body>
</html>

Output :-

image 9

HTML <option> selected Attribute

  • The selected attribute is a boolean attribute.
  • When present, it specifies that an option should be pre-selected when the page loads.
  • The pre-selected option will be displayed first in the drop-down list.
<!DOCTYPE html>
<html>
<body>
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi" selected>Audi</option>
</select>
</body>
</html>	

HTML <button> form action Attribute

The form attribute specifies where to send the form data when a form is submitted. This attribute overrides the form’s action attribute.

The form attribute is only used for buttons with type=“submit”.

<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <button type="submit">Submit</button><br>
  <button type="submit" formaction="/action_page2.php">Submit to another page</button>
</form>
</body>
</html>

Output :-

image 10

Leave a Comment