INPUT CONTROL ELEMENTS
INPUT CONTROL ELEMENTS
class
Indicates the Class of the input
id
Indicates the ID of the input
type
It 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,select and email type inputs )
placeholder
HTML5 A hint to the user of what can be entered in the control.
autocomplete
HTML5 Indicates whether the value of the control can be automatically completed by the browser.
<form action="#" autocomplete="on">
First name: <input type="text" id="fname" name="fname">
<input type="submit">
</form>
readonly
Boolean value that indicates the input is not editable. Readonly controls are still sent on form submission, but will not receive focus.
required
HTML5 Indicates a value must be present or the element must be checked in order for the form to be submitted
autofocus
The <input> element should get the focus when page loads.
value
Specifies the value of <input> element.
step
The step attribute specifies the legal number intervals. It works with the following input types: number, range, date, datetime-local, month, time and week.
Fields
Text
The most basic input type and the default input if no type is specified. All the characters can be entered into this.
<input type="text">
The default width of a text field input is 20 characters.
<input type="text" size="20">
Checkbox and Radio Buttons
<input type="checkbox">
<input type="radio">
Example of Grouping checkbox
<input type="radio" name="color" > Male
<input type="radio" name="color" > Female
<input type="radio" name="color" > Others
Input Validation
HTML input validation is done automatically by the browser based on special attributes on the input element.
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).
validation.
Some newer input types (like email, url, tel, date and many more ) are automatically validated and do not require your own validation constraints.
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.
<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" />
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.">
Here's the message shown in Google Chrome version 51 when attempting to submit the form with an invalid value
inside this field:
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.
<input type="file" accept="image/*" title="Only images are allowed">
Multiple values can be specified with a comma
<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:
<form>
<input type="text" name="name" required>
<input type="submit" value="Publish"> <!-- form will be validated -->
<input type="submit" value="Save" formnovalidate> <!-- form will NOT be validated -->
</form>
Password
<input type="password" name="password">
<input type="password" name="password" placeholder="Password">
File
<input type="file" name="fileSubmission">
File inputs allow users to select a file from their local filesystem for use with the current page.
<form action="#" method="post" enctype="multipart/form-data">
Select file to upload:
<input type="file" name="f1" id="fileSubmission">
<input type="submit" value="Upload your file" name="submit">
</form>
Multiple files
Adding the multiple attribute the user will be able to select more than one file:
<input type="file" name="f2" 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="f3" accept="image/x-png,image /gif,image/jpeg" />
Button
<input type="button" value="Button Text">
without submitting the form
<input type="submit" value="Submit">
Which submits the form.
<input type="reset" value="Reset">
When clicked, resets all inputs in the form.
Hidden
<input type="hidden" name="inputName" value="inputValue">
A hidden input won't be visible to the user, but its value will be sent to the server when the form is submitted.
Tel
<input type="tel" value="+8400000000">
A telephone number.
Email
<form>
<label>E-mail: <label>
<input type="email" name="email">
</form>
E-mail address can be automatically validated when submitted depending on browser support.
Number
<input type="number" value="0" name="quantity">
Range
<input type="range" min="" max="" step="" />
A control for entering a number whose exact value is not important.
Attribute Description Default value
min Minimum value for range 0
max Maximum value for range 100
step Amount to increase by on each increment. 1
Week
<input type="week" />
Dependent on browser support, a control will show for entering a week-year number and a week number.
Url
<input type="url" name="Homepage">
This is used for input fields that should contain a URL address.
Depending on browser support, the url field can be automatically validated when submitted.
Time
<input type="time" />
The time input marks this element as accepting a string representing a time.
Date
<input type="date" />
A date picker will pop up on screen for you to choose a date. This is not supported in Firefox or Internet Explorer
DateTime-Local
<input type="datetime-local" />
Dependent on browser support, a date and time picker will pop up on screen for you to choose a date and time.
Month
<input type="month" />
Dependent on browser support, a control will show to pick the month.
Forms
Submitting
The Action Attribute
The action attribute defines the action to be performed when the form is submitted. If you leave it blank, it will send it to the same file
<form action=" ">
The Method Attribute
The method attribute is used to define the HTTP method of the form which is either GET or POST.
<form action="action.php" method="get">
<form action="action.php" method="post">
Uploading Files
Images and files can be uploaded/submitted to server by setting enctype attribute of form tag to multipart/formdata. Example
<form method="post" enctype="multipart/form-data" action=" ">
<input type="file" name="pic" />
<input type="submit" value="Upload" />
</form>
Grouping a few input fields
While designing a form, you might like to group a few input fields into a group to help organise the form layout.
Example
<form>
<fieldset>
<legend>1st field set:</legend>
Field one: <input type="text"><br>
Field two: <input type="text"><br>
</fieldset><br>
<fieldset>
<legend>2nd field set:</legend>
Field three: <input type="text"><br>
Field four: <input type="text"><br>
</fieldset><br>
<input type="submit" value="Submit">
</form>
