Input Control Elements 1

Input Control Elements 1
Nikhil
Published on 2021-07-01 17:09:08
Parameter Details
class Indicates the Class of the input
id Indicates the ID of the input
type Identifies the type of input control to display. Acceptable values are hidden, text, tel, url, email, password, date, time, number, range, color, checkbox, radio, file, submit, image, reset, and button. Defaults to text if not specified, if the value is invalid, or if the browser does not support the type specified.
name Indicates the name of the input
disabled Boolean value that indicates the input should be disabled. Disabled controls cannot be edited, are not sent on form submission, and cannot receive focus.
checked When the value of the type attribute is radio or checkbox, the presence of this Boolean attribute indicates that the control is selected by default; otherwise it is ignored.
multiple HTML5 Indicates multiple files or values can be passed (Applies only to file and email type inputs )
placeholder HTML5 A hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds
autocomplete HTML5 Indicates whether the value of the control can be automatically completed by the browser.
read-only Boolean value that indicates the input is not editable. Readonly controls are still sent on form submission, but will not receive focus. HTML5: This attribute is ignored when the value of type attribute is either set to hidden, range, color, checkbox, radio, file or button.
required HTML5 Indicates a value must be present or the element must be checked in order for the form to be submitted
alt An alternative text for images, in case they are not displayed.
autofocus The <input> element should get the focus when page loads.
value Specifies the value of <input> element.

A key component of interactive web systems, input tags are HTML elements designed to take a specific form of input from users. Different types of input elements can regulate the data entered to fit a specified format and provide security to password entry.

HTML Text input field


The most basic input type and the default input if no type is specified. This input type defines a single-line text field with line-breaks automatically removed from the input value. All other characters can be entered into this. <input> elements are used within a <form> element to declare input controls that allow users to input data.

Syntax

<input type="text">

or (without specifying a type, using the default attribute):

<input>

The default width of a text field input is 20 characters. This can be changed by specifying a value for the size attribute like this:

<input type="text" size="50">

The size attribute is distinctly different than setting a width with CSS. Using a width defines a specific value (in a number of pixels, percentage of the parent element, etc.) that the input must always be wide. Using the size calculates the amount of width to allocate based on the font being used and how wide the characters normally are.

Note: Using the size attribute does not inherently limit the number of characters that can be entered into the box, only how wide the box is displayed. For limiting the length, see Input Validation.

An input field only allows one line of text. If you need a multi-line text input for a substantial amount of text, use an <textarea> element instead.

HTML Checkbox and Radio Buttons input field


Overview

Checkboxes and radio buttons are written with the HTML tag <input>, and their behavior is defined in the HTML specification. The simplest checkbox or radio button is an <input> element with a type attribute of checkbox or radio, respectively:

<input type="checkbox">
<input type="radio">

A single stand-alone checkbox element is used for a single binary option such as a yes-or-no question. Checkboxes are independent, meaning the user may select as many choices as they would like in a group of checkboxes. In other words, checking one checkbox does not uncheck the other checkboxes in the checkbox group.

Radio buttons usually come in groups (if it's not grouped with another radio button, you probably meant to use a checkbox instead) identified by using the same name attribute on all buttons within that group. The selection of radio buttons is mutually exclusive, meaning the user may only select one choice from a group of radio buttons.

When a radio button is checked, any other radio button with the same name that was previously checked becomes unchecked.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Atutorialhub demo title</title>
</head>
<body>
  <form>
    <fieldset>

      <input type="radio" name="color" id="red" value="#F00">
      <input type="radio" name="color" id="green" value="#0F0">
      <input type="radio" name="color" id="blue" value="#00F">
    </fieldset>
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
  </form>
</body>
</html>

When viewed, radio buttons appear as a circle (unchecked) or a filled circle (checked). Checkboxes appear as a square (unchecked) or a filled square (checked). Depending on the browser and operating system, the square sometimes has rounded corners.

Attributes

checkboxes and radio buttons have a number of attributes to control their behavior:

value

Like any other input element, the value attribute specifies the string value to associate with the button in the event of form submission. However, checkboxes and radio buttons are special in that when the value is omitted, it defaults to on when submitted, rather than sending a blank value. The value attribute is not reflected in the button's appearance.

The checked attribute specifies the initial state of a checkbox or radio button. This is a boolean attribute and may be omitted.

Each of these are valid, equivalent ways to define a checked radio button:

<input checked>
<input checked="">
<input checked="checked">
<input checked="ChEcKeD">

The absence of the checked attribute is the only valid syntax for an unchecked button:

<input type="radio">
<input type="checkbox">

When resetting a <form>, checkboxes and radio buttons revert to the state of their checked attribute

Accessibility Labels

To give context to the buttons and show users what each button is for, each of them should have a label. This can be done using a <label> element to wrap the button. Also, this makes the label clickable, so you select the corresponding button.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Atutorialhub demo title</title>
</head>
<body>
  <label>
    <input type="radio" name="color" value="#F00">
    Red
  </label>
  <label> element with a for attribute set to the id attribute of the button:</label>
  <input type="checkbox" name="color" value="#F00" id="red" />
  <label for="red">Red</label>
</body>
</html>

Button Groups

Since each radio button affects the others in the group, it is common to provide a label or context for the entire group of radio buttons. To provide a label for the entire group, the radio buttons should be included in an <fieldset> element with an <legend> element within it.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Atutorialhub demo title</title>
</head>
<body>
  <fieldset>
    <legend>Theme color:</legend>
    <p>
      <input type="radio" name="color" id="red" value="#F00">
      <label for="red">Red</label>
    </p>
    <p>
      <input type="radio" name="color" id="green" value="#0F0">
      <label for="green">Green</label>
    </p>
    <p>
      <input type="radio" name="color" id="blue" value="#00F">
      <label for="blue">Blue</label>
    </p>
  </fieldset>
</body>
</html>

Checkboxes can also be grouped in a similar fashion, with a fieldset and legend identifying the group of related checkboxes. However, keep in mind that checkboxes should not share the same name because they are not mutually exclusive. Doing this will result in the form submitting multiple values for the same key and not all serverside languages handle this in the same way (undefined behavior).

Each checkbox should either have a unique name or use a set of square brackets ([]) to indicate that the form should submit an array of values for that key. Which method you choose should depend on how you plan to handle the form data client-side or server-side. You should also keep the legend short since some combinations of browsers and screen readers read the legend before each input field in the fieldset.

HTML Input Validation


HTML input validation is done automatically by the browser-based on special attributes on the input element. It could partially or completely replace JavaScript input validation. This kind of validation can be circumvented by the user via specially crafted HTTP requests, so it does not replace server-side input validation. The validation only occurs when attempting to submit the form, so all restricted inputs must be inside a form in order for validation to occur (unless you're using JavaScript). Keep in mind that inputs that are disabled or read-only will not trigger

validation.

Some newer input types (like email, URL, tel, date, and many more ) are automatically validated and do not require your own validation constraints.

Version ≥ 5 Required

Use the required attribute to indicate that a field must be completed in order to pass validation.

<input required>

Minimum / Maximum Length

Use the minlength and maxlength attributes to indicate length requirements. Most browsers will prevent the user from typing more than max characters into the box, preventing them from making their entry invalid even before they attempt submission.

<input minlength="3">
<input maxlength="15">
<input minlength="3" maxlength="15">

Specifying a range

Use min and max attributes to restrict the range of numbers a user can input into an input of type number or range

Marks: <input type="number" size="6" name="marks" min="0" max="100" />

Subject Feedback: <input type="range" size="2" name="feedback" min="1" max="5" />

Version ≥ 5 Match a Pattern

For more control, use the pattern attribute to specify any regular expression that must be matched in order to pass validation. You can also specify a title, which is included in the validation message if the field doesn't pass.

<input pattern="d*" title="Numbers only, please.">

Not all browsers display a message for invalid patterns, although there is full support among most used modern browsers.

Accept File Type

For input fields of type file, it is possible to accept only certain types of files, such as videos, images, audios, specific file extensions, or certain media types. For example:

<input type="file" accept="image/*" title="Only images are allowed">

Multiple values can be specified with a comma, e.g.:

<input type="file" accept="image/*,.rar,application/zip">

Note: Adding novalidate attribute to the form element or formnovalidate attribute to the submit button, prevents validation on form elements. For example:

<!DOCTYPE html>
<html>
<head>
  <title>Atutorialhub demo title</title>
</head>
<body>
  <form>
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <input pattern="d*" name="number" required>
    <input type="submit" value="Publish"> <!-- form will be validated -->
    <input type="submit" value="Save" formnovalidate> <!-- form will NOT be validated -->
  </form>
</body>
</html>

The form has fields that are required for "publishing" the draft but aren’t required for "saving" the draft.

 

HTML Color sections


<input type="color" name="favcolor" value="#ff0000">

In supporting browsers, the input element with a type attribute whose value is color creates a button-like control, with a color equal to the value of color attribute (defaults  to black if value is not specified or is an invalid hexadecimal format).

ouput: click the color:

 

HTML Password input field


<input type="password" name="password">

The input element with a type attribute whose value is password creates a single-line text field similar to the input type=text, except that text is not displayed as the user enters it.

<input type="password" name="password" placeholder="Password">

Placeholder text is shown in plain text and is overwritten automatically when a user starts typing.

output:

Note: Some browsers and systems modify the default behavior of the password field to also display the most recently typed character for a short duration, like so:

 

HTML File input field


<input type="file" name="fileSubmission">

File inputs allow users to select a file from their local filesystem for use with the current page. If used in conjunction with a form element, they can be used to allow users to upload files to a server (for more info see Uploading Files).

The following example allows users to use the file input to select a file from their filesystem and upload that file to a script on the server named upload_file.php.

<!DOCTYPE html>
<html>
<head>
  <title>Atutorialhub demo title</title>
</head>
<body>
  <form action="upload_file.php" method="post" enctype="multipart/form-data">
    Select file to upload:
    <input type="file" name="fileSubmission" id="fileSubmission">
    <input type="submit" value="Upload your file" name="submit">
  </form>
</body>
</html>

Multiple files

Adding the multiple attribute the user will be able to select more than one file:

<input type="file" name="fileSubmission" id="fileSubmission" multiple>

Accept Files

Accept attribute specifies the types of files that user can select. E.g. .png, .gif, .jpeg.

<input type="file" name="fileSubmission" accept="image/x-png,image/gif,image/jpeg" />

output:

Select file to upload:  

 

HTML Button input field


<input type="button" value="Button Text">

Buttons can be used for triggering actions to occur on the page, without submitting the form. You can also use the <button> element if you require a button that can be more easily styled or contain other elements:

<button type="button">Button Text</button>

Buttons are typically used with an "onclick" event:

<input type="button" onclick="alert('hello world!')" value="Click Me">
or
<button type="button" onclick="alert('hello world!')">Click Me</button>

Attributes

  • [name] - The name of the button, which is submitted with the form data.
  • [type] -The type of the button.

Possible values are:

  • submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
  • reset : The button resets all the controls to their initial values.
  • button : The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.
  • menu : The button opens a popup menu defined via its designated element.

[value]
The initial value of the button.Version ≥ 5

Extra Attributes for Submit Buttons

Attribute Description
form Specifies the ID of the form the button belongs to. If none is specified, it will belong to its ancestor form element (if one exists).
formaction Specifies where to send the form-data when the form is submitted using this button.
formenctype Specifies how the form-data should be encoded when submitting it to the server using this button. Can only be used with formmethod="post".
formmethod Specifies the HTTP method to use (POST or GET) when sending form-data using this button.
formnovalidate Specifies that the form-data should not be validated on submission.
formtarget Specifies where to display the response that is received after submitting the form using this button.

 

ATutorialHub Related Guide

HTML Tutorials Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website