Tutorial by Examples

Overview Checkboxes and radio buttons are written with the HTML tag <input>, and their behavior is defined in the HTML specification. The simplest checkbox or radio button is an <input> element with a type attribute of checkbox or radio, respectively: <input type="checkbox&quo...

<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 nonetheless.

<input type="password" name="password"> The input element with a type attribute whose value is password creates a single-line text field similar to the input type=text, except that text is not displayed as the user enters it. <input type="password" name=&qu...

<input type="submit" value="Submit"> A submit input creates a button which submits the form it is inside when clicked. You can also use the <button> element if you require a submit button that can be more easily styled or contain other elements: <button type=&...

<input type="file" name="fileSubmission"> File inputs allow users to select a file from their local filesystem for use with the current page. If used in conjunction with a form element, they can be used to allow users to upload files to a server (for more info see Upload...

HTML input validation is done automatically by the browser based on special attributes on the input element. It could partially or completely replace JavaScript input validation. This kind of validation can be circumvented by the user via specially crafted HTTP requests, so it does not replace serve...

<input type="reset" value="Reset"> An input of type reset creates a button which, when clicked, resets all inputs in the form it is contained in to their default state. Text in an input field will be reset to blank or its default value (specified using the value attri...

5 <input type="number" value="0" name="quantity"> The Input element with a type attribute whose value is number represents a precise control for setting the element’s value to a string representing a number. Please note that this field does not guarantee to h...

<input type="tel" value="+8400000000"> The input element with a type attribute whose value is tel represents a one-line plain-text edit control for entering a telephone number.

5 The <input type="email"> is used for input fields that should contain an e-mail address. <form> <label>E-mail: <label> <input type="email" name="email"> </form> E-mail address can be automatically validated when submitte...

<input type="button" value="Button Text"> Buttons can be used for triggering actions to occur on the page, without submitting the form. You can also use the <button> element if you require a button that can be more easily styled or contain other elements: <butt...

5 <input type="color" name="favcolor" value="#ff0000"> In supporting browsers, the input element with a type attribute whose value is color creates a button-like control, with a color equal to the value of color attribute (defaults to black if value is not spe...

5 <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. Some smartphones recognize the url type, and adds ".com" to the k...

5 <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.

5 <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.

<input type="image" src="img.png" alt="image_name" height="50px" width="50px"/> An Image. You must use the src attribute to define the source of the image and the alt attribute to define alternative text. You can use the height and width att...

5 <input type="range" min="" max="" step="" /> A control for entering a number whose exact value is not important. AttributeDescriptionDefault valueminMinimum value for range0maxMaximum value for range100stepAmount to increase by on each increment.1...

5 <input type="month" /> Dependent on browser support, a control will show to pick the month.

5 <input type="time" /> The time input marks this element as accepting a string representing a time. The format is defined in RFC 3339 and should be a partial-time such as 19:04:39 08:20:39.04 Currently, all versions of Edge, Chrome, Opera, and Chrome for Android support typ...

5 <input type="week" /> Dependent on browser support, a control will show for entering a week-year number and a week number with no time zone.