Input Element/Tag in HTML5 Form Inputs and its attributes:
Web development is a vast field. And when we talk about interactive websites then we come to the point, how to get inputs from user and how user put his data on website so that the website manipulates it and use it. But it starts and ends with a TAG.
So as we see login forms/sign in forms or registration forms/sign up forms on many websites for user login they all had fields which take data/inputs from user and that fields are called input fields.
In HTML input fields are defined using a tag named input like <input> and they are used to take inputs from user and have different types. All the input tags within and HTML page are placed inside a form tag so that after taking input from user that form submit that inputs to the place where these inputs are used.
Inputs fields are of many types depending on form inputs or required input types.
Input tag has no ending tag. It’s a self-closing tag. <input />
Input tag has empty body it’s only work with attributes’ and have a gig rang of attributes having different finicalities.
Input Tag Attributes:
Normally the input tag has a simple syntax:
<input type="text" />
The most common and must use attributes’ of input tag is ”Type” which specify the type of input that the input box only receive. If the type of input box is number then it never allow the user to enter alphabetic data. Type attribute have many values which we discuss latter.
<input type="text" name="fname" />
Name: The name attribute is use to specify the name of input in PHP or any server side language so that the server identify the field and read the data from it.
Class: The class attribute is normally use to define the class of input field so that during styling (in CSS) the filed we point that input field using its class name and we group many input field for same style by putting same class name.
<input type="text" class="input_field" />
ID: The ID attribute is use to give some ID to an input filed .we use that id for its unique identification in CSS and element is represented in Java script by using its ID.
<input type="text" id="one" />
Value: The value attribute define the value of the input and its use only that time when we want to put some default value in input fields.
<input type="text" value="Pakistan" />
Placeholder: It’s just a sort hint. The place holder in input filed is use to represent the input field so that user know what kind of input he put here. It’s just a place holder and when user focus on input filed or click on input field the vale of place holder in hidden and it take the value from user.
<input type="text" placeholder="First Name" />
Min: The Min Attribute defines the minimum value that input filed takes usually used with input type number or date.
<input type="number" min="5" />
Max: The Max Attribute defines the maximum value that input filed takes usually used with input type number or date.
<input type="number" max="5" />
Size: This attribute specify the size of the input filed that how many character it takes.
<input type="text" size="15" />
Type: The type attribute is must in input filed as without it we could not recognize what type of input field it is. The type attributes have many values and many of other attributes on input field depend on type of input as may be they have no effect on input fields like if we define the max or min size of a radio input filed its useless as radio button has no lengths just Yes or No values.
Different Type Attribute Values:
Text, Number, Email, Password, button, submit, checkbox, radio, file, date, time, image, datetime etc.
<input type="text" >
<input type="number" >
<input type="email" >
<input type="date" >
<input type="time" >
<input type="radio" >
<input type="checkbox" >
<input type="color" >
<input type="image" atl="imge is not showing yet" src="">
<input type="button" value="button">
<input type="file" >
<input type="reset" value="reset">
Some Other Different Attributes of Input Tag:
<input type="text" value="usman" readonly />
This attribute is use when we just want to show value to user and user doesn’t edit or remove it so we make it read only.
<input type="text" value="usman" hidden />
This attribute hide that input box .normally it is use when we want to submit some pre diffine value without user knowledge.
<input type="radio" checked="checked"/>
This attribute is use in radio type input box and when we use check as attribute in it the radio box is auto check this filed.
<input type="password" required />
This attributes force user to must enter the data on that field and then submit it.
Now we know all the attributes so the HTML code for a simple login form is like bellow:
<input type=”text” placeholder=”User Name” />
<input type=”password” placeholder=”User Password” />
<input type=”submit” value=”submit” />