HTML Input Tag Attributes

• Introduction
• Input tag
• Main attributes in input tag
• Conclusion

Introduction

  Hello friends, In this article I am going see about html input tag attributes. If you want to accept value from the user and If you need to accept text from the user. For that you need to create a text control or input text box. To create an input text box, you must use a tag called input. You can also create a button in the input tag. It is a inline-block element, which means If there is space they will show inline and if there is no space they will fold to the next line.

 Since the input is an unpaired tag, you do not have to keep the closing tag Instead we can put the forward slash at the end of the opening tag. The ‘type’ attribute plays an important role in the html input tag attributes and it is used to say input type. The default value of the type attribute is “text”. Additional information on the input tag can be found below

Input tag

 You must use type and name attribute when using the input tag. It allow you to add elements on your page where users can input information. So there are things like text boxes, text areas, checkboxes and radio buttons. You know all sorts of elements on the site that users can interact with to enter information. The mostly using text value in the type attribute. If you have the value password in the type attribute, if you type that box it will be visible as dot. You can use the type attribute to suit your needs. It is use full for create forms, login page, submit button and more.

HTML Input Tag Attributes:

Type attribute and its value:

It is very important attribute in html input tag. It has a lot of value and let me explain how each is used:

<input type= "button" value="Click here">

This value is used to create the button. Enter whatever text you want to put on the button in the value attribute.

Checkbox Type:

<input type= “checkbox” checked>

 This value is used to create the checkbox. You have ask a question and create a checkbox below, If the question is correct you can ask them to tick that checkbox. If you use the checked attribute, by default, there is a tick in the checkbox.

Color Type:

<input type= “color”>

 You use this value, the Colorbox will be open. If you want to find the hexa-decimal value of a color you can use it.

Date Type:

<input type= “date”>

 You can use this value, the calender box will be open. If you ask for the date of birth and use this value, it will be easier for the user to enter the DOB

Datetime-local Type:

<input type= “datetime-local” >

 If you use this value, the date with time box will be open. It is rarely used because we don’t always ask for a specific time.

Email Type:

<input type= “email” id= “email” multiple >

 It is used to define a field for an e-mail address. If you use the ID and give it a value as email, then click on the email box and the old email suggestion will be displayed. If the attribute of “multiple” is used it allow multiple email addresses

File Type:

<input type= “file” >

 It is used to allows users easy to share their files.

Hidden type:

<input type= “hidden”>

 If you set the value to be hidden, nothing will be displayed on the screen.

Image type:

<input type=”image” src=”img_submit.gif” alt=”Image not showing”>

 It’s just like you use the <img> tag. You can also display your image location in the src attribute. Use alt attribute to display alttext when the image is not displayed. Use height and width attribute to specify image size.

Month Type:

<input type=”month” >

 It is used to select user month and year.

Number Type:

<input type=”number”>

 If you use this value, To select a user number. You can not type anything other than the number. Using “number” value, will automatically generate an increment and decrement button.

Password Type:

<input type=”password” >

 It is used to hide your password and you will see the dot as your password as you type using “Password” value. It will prevent your password from being known to anyone

Range Type:

<input type=”range” >

 User value can be increased or decreased according to them. Adding volume or brightness like this makes it easier for users to use

Reset Type:

<input type=”reset” >

 If you mistyped the information in your form, you can use this to go back position of the form.

Search Type:

<input type=”search” >

 Users will search for data using this search box.

Submit Type:

<input type=”submit”>

 It is used to create the submit button. After clicking the submit button, the user’s data will be transferred to the server

Text Type:

<input type=”text” >

  Text value is the default value in html input tag. It is used to type some text in the box.

Time Type:

<input type=”time” >

  Use to create a time selection box and it helps to select the user time.

URL Type :

<input type=”url” >

It is used to create URL box and it allows your website URL or others URL. For example: To check the speed of your website put your website URL in some box and check, that box as URL box.

Week Type :

<input type=”week” >

 This type value is used to create week and year box.

Value Attribute

<input type="submit" value="Sign up" >

 It works differently on different input types. For button, the value attribute specifies the text on button element. For password, the value attribute specifies initial(default) value of the html input tag attributes field.

Read only Attribute

<input type="text" value="Demo" readonly >

  If you use readonly attribute, you can only see that the value cannot be changed.

Disabled Attribute:

<input type="text" value="Demo" disabled>

  The input element when it loads on the client side’s web page, so that user cannot write text in it or select it. This attribute cannot be used with type=”hidden”. If you use “hidden” value it will disappear completely, use this to see the disappearance.

Min and Max Attributes

<input type="number" min="5" max="100">

  You can only use the min & max attribute if you have type = number value. If we give a value of 5 in the min attribute, it will add up to five when scrolling through the box, cannot go below 5 because the minimum value is 5. If we give a value of 100 in the max attribute, we will not be able to exceed 100 when scrolling through the box, because 100 is the max value.

Max-length Attribute

<input type="text" placeholder="pincode" maxlength="6">

 How much do you value the maxlength attribute, you cannot type more than that value. For ex: All pincodes have six values, ​​so you use the maxlength attribute and value it “6”. The user will not be able to type more than 6 value.

Multiple Attribute

<input type="email" multiple>
<input type="filel" multiple>

This attribute will only work if it has email and file type value. You can use this attribute if you want to select the multiple file. You can also give multiple emails.

Placeholder Attribute

<input type="text" placeholder="Username">

  It is one of the important attribute in html input tag. It gives you users a clear indication of what particular form field is expecting them to type into it without the need for labels alongside of it or on top of it.

Required Attribute

<form>
<input type="text" required>
<input type="submit">
</form>

  To control the form submission to tell to the user that these are the controls which are required controls, you must and should give value to these controls these controls should not be empty. How we are going to do that, by using required attribute.

Auto complete Attribute

<input type="email" name="email" autocomplete="on">

 The input field an autocomplete feature that is powered by a data list tag your data list can also be made dynamic in which ajax and PHP quickly access your database of information to render a dyamic auto complete feature just like Google search bar.

Conclusion:

 In this article I talked about important html input tag attributes, I hope these Input tag main attributes benefit you. If you have any doubts, let us know in the comments.