Using The <Input> tag in HTML:-
This tag is used to create a input or text field. It allows user to fill data in given field. The <Input> tag with the help of attributes gives different types of input fields. This tag has no end. The default value for input type is text.
Syntax of input tag is
<input attribute=”value”>
Attributes of <Input>:
1. Type: It describes, the name of the control like text, radio etc. Following are examples of input type value
<Input type = "text">:- This creates a one line textbox
<Input type = "checkbox">: This creates a checkbox. It allows more than one selection from multiple choices.
<Input type = "submit">: This creates a button for submitting the form data to a server.
<Input type = "password">: This creates a text field which is displayed in asterisk (*)
<Input type = "reset">: This creates a button for deleting all data filled in form.
<Input type = "button">: It displays push button which activates on events or a function.
2. Name: This attribute assign name to the textbox. The name attribute is a user defined value. If the name attribute is not specified, the data of that input field will not get submitted.
3. Maxlength: This attribute is used for specifying the maximum number of characters which can be entered in a text or password box.
4. Size: The 'Size' attribute can be used with text and password type. It specifies the width of the text box.
5. Checked: The 'Checked' attribute specifies the default selection for options in a checkbox or radio button.
6. Value: This attribute specifies default value in a text box.
HTML5 introduces some new input types:
<input type="color">: Defines a color picker
<input type="number">: Defines a field for entering a number
<input type="url">: Defines a field for entering a URL.
<input type="image">: Defines an image as a submit button.
<input type="date">: Defines a date picker with the year, month and day
<input type="email">: Defines a field for an e-mail address
<input type="month">: Defines a month and year control in format is "YYYY-MM"
<input type="range">: Define a range control. Default range is 0 to 100.
<input type="datetime-local">: Defines a date picker that includes the year, month, day and time.
<input type="time">: Defines a control for entering a time.
<input type="week">: Defines a week and year control.
<input type="search">: Defines a text field for entering a search string like a site search or Google search.
<input type="file">: Defines a file-select field and a "Browse" button for file uploads.
<input type="tel">: Used for defining input fields that should contain a telephone number
Input Restrictions in HTML
disabled: Specifies that an input field should be disabled.
max: Specifies the maximum value for an input field.
min: Specifies the minimum value for an input field.
pattern: Specifies a regular expression to check the input values.
read only: Specifies that an input field is read only (cannot be changed).
placeholder: This acts as a temporary label showing the purpose of a text field without requiring a label tag.
required: Specifies that an input field is required (must be filled out).
autocomplete: Specifies whether a form or input field should have autocomplete On or Off.
autofocus: Specifies that the input field should automatically get focus when the page loads.
height and width: Specifies the height and width of an <input type="image">
multiple: Specifies that the user is allowed to enter more than one value in the textbox.
other attributes of input tag are id and class
( Common Question in this topic
How to learn all input attributes?
It is not necessary to learn all this input types, all you need is to remember some basic input types as i had used in given code. )
Comments
Post a Comment