Input Elements

Nowadays Pretty much every application we develop using HTML uses input somewhere there is a bunch of input type's you might know and some of them you might not know about. So let's take a look at everything you might not know about input types.

In HTML, we can give the input a specific type. For example a simple textbox input to use, where a user can type text in the box, which usually look like this:

<input type="text" id="text_user" name="user_input" />

The Most Used Common Input Types Are:

• hidden - a hidden form input, usually for storing values the user doesn’t need to see.

• text - a simple text input.

• password - an input where the text is starred out since it is a password.

• submit - a submit button for submitting the form.

• button - like a submit, reset but it doesn’t submit the form.

• radio - a button that can be selected, from a range of list items.

• checkbox - a set of buttons that can be checked and unchecked.

As Well as these basic types:

• there is also search - although not as commonly used, it can be used for a search input field.

• and we also have reset, which creates a button that does not submit the form, and says reset. It will reset all other form elements.

So let's go through the input types we have mentioned above:

1. Type="hidden"

The <input type="hidden"> defines a hidden input field. A hidden field lets web developers include data that cannot be seen or modified by users when a form is submitted. A hidden field often stores what database record needs to be updated when the form is submitted**(It is used by developers)**.

Let's see the attributes of type="hidden":

• value: It holds a string that contains the hidden data you want to include when the form is submitted to the server.

• name: It is one of the common attributes, but it has a special meaning available for hidden inputs.

Example:

  <input type="hidden" id="postId" name="postId" value="34657" />

1. Type="text"

The <input type="text"> defines a single-line text field. The default width of the text field is 20 characters. It simply takes strings in any form as input.

Let's see the attributes of type="text":

• value: The value attribute is a string that contains the current value of the text entered into the text field.

• maxlength: The maximum number of characters the user can enter into the text input.

• minlength: The maximum number of characters the user can enter into the text input.

• placeholder: The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field.

• size: The size attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20.

Example:

<input type="text" id="user-text" minlength="10" maxlength="14" size="25" required>

1. Type="password"

The <input type="password"> defines a password field (characters are masked).

Let's see the attributes of type="password":

• value: The value attribute is a string whose value will be the current contents of the text editing control being used to enter the password. If the user hasn't entered anything yet, this value is an empty string ("").

• maxlength: The maximum number of characters the user can enter into the password input.

• minlength: The minimum number of characters the user can enter into the password input.

• pattern: The pattern attribute, when specified, is a regular expression that the input's value must match for the value to pass constraint validation. It must be a valid JavaScript regular expression.

• placeholder: The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field.

• size: The size attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20.

Example:

<input id="userPassword" type="password" placeholder="enter password" />

1. Type="button"

The <input type="submit"> defines a submit button that submits all form values to a form handler. The form handler is typically a server page with a script for processing the input data.

Let's see the attributes of type="submit":

• value: The value attribute contains a string that is displayed as the button's label. Buttons do not have a true value otherwise.

• formaction: A string indicating the URL to which to submit the data. This takes precedence over the action attribute on the <form> element that owns the <input> .

• formenctype: A string that identifies the encoding method to use when submitting the form data to the server.

• formtarget: A string that specifies a name or keyword that indicates where to display the response received after submitting the form.

Example:

 <div>
    <input type="submit" value="Submit" />
  </div>

1. Type= "radio"

The <input type="radio"> defines a radio button. Radio buttons are normally presented in radio groups (a collection of radio buttons describing a set of related options). Only one radio button in a group can be selected at the same time.

Let's see the attributes of type="radio":

• value: The value attribute is a string containing the radio button's value. The value is never shown to the user. Instead, it's used to identify which radio button in a group is selected.

• checked: A boolean attribute which, if present, indicates that this radio button is the default selected one in the group.

• required: The required attribute is one which most <input>s share. If any radio button in a same-named group of radio buttons has the required attribute, a radio button in that group must be checked, although it doesn't have to be the one with the attribute applied.

Example:

<p>How old are you?</p>
<input type="radio" id="child" name="age" value="child">
<label for="child">17 years or younger</label><br>
<input type="radio" id="adult" name="age" value="adult">
<label for="adult">18 - 64 years</label><br>
<input type="radio" id="senior" name="age" value="senior">
<label for="senior">65 years or older</label>

1. Type= "checkbox"

The <input type="checkbox"> defines a checkbox. The checkbox is shown as a square box that is ticked (checked) when activated. Checkboxes are used to let a user select one or more options of a limited number of choices.

Let's see the attributes of type="radio":

• value: The value attribute is a string containing the radio button's value. The value is never shown to the user. Instead, it's used to identify which radio button in a group is selected.

• checked: A boolean attribute which, if present, indicates that this radio button is the default selected one in the group.

Example:

<div>
<p>Your favorite technologies</p>
  <label><input type="checkbox" name="html" value="html" checked> HTML</label><br />
  <label><input type="checkbox" name="css" value="css"> CSS</label><br />
  <label><input type="checkbox" name="javascript" value="javascript"> Javascript</label><br />
 <label><input type="checkbox" name="csharp" value="csharp"> C#</label>                <br />
   <input type="submit" value="Submit">
</div>

1. Type= "number"

The input type = "number" is used when the required input is a number. The input type = "number" has a built-in function that will reject any non-numerical input. The input will also have 2 buttons for increasing or decreasing the number.

Let's see the attributes of type="number":

• value: A number representing the value of the number entered into the input. You can set a default value for the input by including a number inside the value attribute.

• max: The maximum value to accept for this input. If the value entered into the element exceeds this, the element fails constraint validation .

• min: The minimum value to accept for this input. If the value entered into the element is less than this, the element fails constraint validation .

• placeholder: The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field.

• step: The specified interval between two values (default step value is 1).

<input type="number" id="myNumber" value="10" step="5">

1. Type="date"

The input type = "date" is used when the required input is a date. The date can be entered manually (only numerical values) or with the help of the given date-picking interface.

Let's see the attributes of type="date":

• value: A string representing the date entered in the input. The date is formatted according to ISO8601.

• max: The latest date to accept. If the value entered into the element occurs afterward, the element fails constraint validation.

• min: The earliest date to accept. If the value entered into the element occurs beforehand, the element fails constraint validation.

<form>   
Employee Name: <input type="text" placeholder="Enter Your name" Required>  
<br>  
<br>  
Date of Joining: <input type = "date">   
<button type="submit" name="btn">Submit</button>  
</form>

1. Type="tel"

The input type = "tel" is used to let the user enter and edit a telephone number. The input value is not automatically validated to a particular format before the form can be submitted, because formats for telephone numbers vary so much around the world.

Let's see the attributes of type="tel":

• value: The value attribute contains a string that either represents a telephone number or it is an empty string (" ").

• maxlength: The maximum number of characters the user can enter into the telephone number field. This must be an integer value of 0 or higher. If no maxlength is specified, or an invalid value is specified, the telephone number field has no maximum length.

• minlength: The maximum number of characters the user can enter into the telephone number field. This must be a non-negative integer value smaller than or equal to the value specified by maxlength. If no minlength is specified, or an invalid value is specified, the telephone number input has no minimum length.

• placeholder: The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field.

Takeaway

I hope you learned something new today from this blog. For Reference use https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button

That's it for the day see you in the next blog until then...

Keep Writing Code❤️