Form Input in HTML | Students Empire

form input

button input

The submit, reset, and button types of input element create buttons that are very similar to those created when using the button element.

submit - Creates a button that submits the form. Additional Attributes: formaction, formenctype, formmethod,formtarget, formnovalidate
reset - Creates a button that resets the form
button - Creates a button that performs no action

The additional attributes that are available when you use the submit type are the same as when you use the submit button element.

The reset and button types don't define any additional attributes

For all three of these input types, the label that is displayed on the button is taken from the value attribute.

		            <!DOCTYPE HTML>
		            <html>
		            <body>
		            <form method="post" action="#">
		            <p>
		            <label for="name"> Name: <input value="XML" id="name" name="name">
		            </label>
		            </p>
		            <p>
		            <label for="password"> Password:
		            <input type="password" placeholder="Min 6 characters" id="password" name="password">
		            </label>
		            </p>
		            <p>
		            <label for="fave"> Fruit:
		            <input value="Apples" id="fave" name="fave">
		            </label>
		            </p>
		            <input type="submit" value="Submit">
		            <input type="reset" value="Reset">
		            <input type="button" value="Button">
		            </form>
		            </body>
		            </html>

The input button elements cannot use the button element to display marked up text.

password input

Setting type attribute to password creates an input element for entering a password.

The characters that the user types are represented by a masking character, such as an asterisk (*).

password input element can have the following the additional attributes. Many of these are shared with the text type and work in the same way.

maxlength - Sets the maximum number of characters that the user can enter into the password box.
pattern - Specifies a regular expression pattern for input validation.
placeholder - Specifies a hint to the user as to the kind of input that you expect.
readonly - If present, makes the password box read-only, and the user cannot edit the content.
required - Specifies that the user must enter a value for the purposes of input validation.
size - Specifies the width of the element, in the number of characters.
value - Specifies the initial value for the password.

		            <!DOCTYPE HTML>
		            <html>
		            <body>
		            <form method="post" action="#">
		            <p>
		            <label for="name"> Name:
		            <input value="XML" id="name" name="name">
		            </label>
		            </p>
		            <p>
		            <label for="password"> Password:
		            <input type="password" placeholder="Min 6 characters" id="password" name="password">
		            </label>
		            <br>Another Password:
		            <input type="password" name="pwdPassword" value="" size="20" maxlength="20" /><br>
		            </p>
		            <p>
		            <label for="fave"> Fruit:
		            <input value="Apples" id="fave" name="fave">
		            </label>
		            </p>
		            <button type="submit">Submit Vote</button>
		            </form>
		            </body>
		            </html>

Restrict Data Entry input

HTML5 introduces new values for the input element's type attribute and we can collect more specific data from the user.

checkbox - Restricts the input to a true/false check box
color - Restricts the input to a color
date - Restricts the input to a date
datetime - Restricts the input to a global date and time with time zone
datetime-local - Restricts the input to a global date and time without time zone
email - Restricts the input to a properly formatted e-mail address
month - Restricts the input to a year and month
number - Restricts the input to an integer or floating-point number
radiobutton - Restricts the input to a fixed set of choices
range - Restricts the input to a specified range
tel - Restricts the input to a properly formatted telephone number
time - Restricts the input to a time of day
week - Restricts the input to a year and week
url - Restricts the input to a fully qualified URL

number input

The number value for the type attribute creates an input box that will only accept numeric values.

list - Sets id of a datalist element that provides values for this element
min - Sets the minimum value for the purposes of input validation
max - Sets the maximum value for the purposes of input validation
readonly - If present, makes the input box read-only, and the user cannot edit the content
required - user must provide a value for the purposes of input validation
step - Sets the step of increments and decrements to the value
value - Specifies the initial value for the element

The values for the min, max, step, and value attributes can be expressed as integer or decimal numbers

		            <!DOCTYPE HTML>
		            <html>
		            <body>
		            <form method="post" action="">
		            <p>
		            <label for="price"> Rs. per unit in your area: 
		                  <input type="number" step="1" min="0" max="100" value="1" id="price" name="price">
		            </label>
		            </p>
		            <input type="submit" value="Submit">
		            </form>
		            </body>
		            </html>

range input

We can get a numeric value using the range type of input element.

The value from range input element restricts the user to selecting a value from a predetermined range.

The range type supports the same set of attributes as the number type.

		            <!DOCTYPE HTML>
		            <html>
		            <body>
		            <form method="post" action="">
		            <p>
		            <label for="price"> Rs. per unit in your area: 1 
		                  <input type="range" step="1" min="0" max="100" value="1" id="price" name="price">100
		            </label>
		            </p>
		            <input type="submit" value="Submit">
		            </form>
		            </body>
		            </html>

checkbox input

The checkbox type of the input element creates a check box that allows the user to make a true/false choice.

checked - If applied, check the checkbox when initially displayed or when the form is reset
required - Specifies that the user must check the check box
value - Sets the value submitted to the server when the check box is checked

		            <!DOCTYPE HTML>
		            <html>
		            <body>
		            <form method="post" action="">
		            <p>
		            Which of the following skills do you possess? Select all that apply.<br>
		            <input checked type="checkbox" name="chkSkills" value="html">HTML <br>
		            <input type="checkbox" name="chkSkills" value="xhtml">XHTML <br>
		            <input type="checkbox" name="chkSkills" value="CSS">CSS<br>
		            <input checked type="checkbox" name="chkSkills" value="JavaScript">JavaScript<br>
		            <input type="checkbox" name="chkSkills" value="aspnet">ASP.Net<br>
		            <input checked type="checkbox" name="chkSkills" value="php">PHP
		            </p>
		            <input type="submit" value="Submit">
		            </form>
		            </body>
		            </html>

radio input

The radio type of the input element creates a group of radio buttons that let the user pick from a fixed set of options.

checked - If applied, select the radio button when initially displayed or when the form is reset
required - User must select one of the radio buttons
value - Specifies the data value that is submitted to the server when the check box is checked

Each input element with the type radio represents a single option to the user

A set of exclusive options should have the same value for the name attribute.

		            <!DOCTYPE HTML>
		            <html>
		            <body>
		            <form method="post" action="">
		            <p>
		            <fieldset>
		            <legend>Vote for your favorite fruit</legend>
		            <label for="apples">
		            <input type="radio" checked value="Apples" id="apples" name="fave" /> Apples
		            </label>
		            <label for="oranges">
		            <input type="radio" value="Oranges" id="oranges" name="fave" /> Oranges
		            </label>
		            <label for="cherries">
		            <input type="radio" value="Cherries" id="cherries" name="fave" /> Cherries
		            </label>
		            </fieldset>
		            </p>
		            <input type="submit" value="Submit">
		            </form>
		            </body>
		            </html>

Fieldset and legend attributes give the user a visual cue that the three buttons are related.

The checked attribute is set on the first of the radio elements so that there is always a value selected.

email input

The email type value configure the input element to accept only input that is a valid e-mail address.

list - Sets the id of a datalist element that provides values for the element
maxlength - Specifies the maximum length that the user can enter into the text box
pattern - Specifies a regular expression pattern for input validation
placeholder - Specifies a hint to the user
readonly - If present, make the text box read-only
required - Specifies that the user must provide a value
size - Specifies the width of the element
value - Specifies the initial value for the element. For the email type, this can be a single address, or multiple addresses separated by commas

The email type also supports the multiple attribute which, when applied, allows the input element to accept multiple e-mail addresses.

		            <!DOCTYPE HTML>
		            <html>
		            <body>
		            <form method="post" action="">
		            <p>
		            <label for="email"> Email: 
		                  <input type="email" placeholder="enter your email" id="email" name="email">
		            </label>
		            </p>
		            <input type="submit" value="Submit">
		            </form>
		            </body>
		            </html>

tel input

The tel type value configure the input element to accept only input that is a telephone number.

list - Sets the id of a datalist element that provides values for the element
maxlength - Specifies the maximum length that the user can enter into the text box
pattern - Specifies a regular expression pattern for input validation
placeholder - Specifies a hint to the user
readonly - If present, make the text box read-only
required - Specifies that the user must provide a value
size - Specifies the width of the element
value - Specifies the initial value for the element

		            <!DOCTYPE HTML>
		            <html>
		            <body>
		            <form method="post" action="">
		            <p>
		            <label for="tel"> Tel: 
		            <input type="tel" placeholder="enter number" id="tel" name="tel">
		            </label>
		            </p>
		            <input type="submit" value="Submit">
		            </form>
		            </body>
		            </html>

url input

The url type values configure the input element to accept only input that is a URL.

list - Sets the id of a datalist element that provides values for the element
maxlength - Specifies the maximum length that the user can enter into the text box
pattern - Specifies a regular expression pattern for input validation
placeholder - Specifies a hint to the user
readonly - If present, make the text box read-only
required - Specifies that the user must provide a value
size - Specifies the width of the element
value - Specifies the initial value for the element

		            <!DOCTYPE HTML>
		            <html>
		            <body>
		            <form method="post" action="">
		            <p>
		            <label for="url"> Your homepage: 
		                  <input type="url" id="url" name="url">
		            </label>
		            </p>
		            <input type="submit" value="Submit">
		            </form>
		            </body>
		            </html>

time date input

HTML5 has introduced some input element types to gather dates and times from the user. The following list describes these input types.

datetime - Obtains a global date and time, including time zone. Example:2018-12-15T16:42:39.421Z
datetime-local - Obtains a local date and time, (with no time zone information). Example:2018-12-15T16:42:39.421
date - Obtains a local date (with no time or time zone). Example:2018-12-15
month - Obtains a year and month (no day, time, or time zone information). Example:2018-12
time - Obtains a time. Example:17:42:44.746
week - Obtains the current week. Example:2018-W42

The following list has additional attributes available for the Date and Time input Element Types.

list - Sets the id of a datalist element that provides values for the element
min - Sets the minimum acceptable value
max - Set the maximum acceptable value
readonly - Marks the text box to read-only
required - Specifies that the user must provide a value
step - Specifies the granularity of increments and decrements to the value
value - Specifies the initial value for the element

		            <!DOCTYPE HTML>
		            <html>
		            <body>
		            <form method="post" action="">
		            <p>
		            <label for="lastbuy"> When did you last buy:
		            <input type="date" id="lastbuy" name="lastbuy">
		            </label>
		            </p>
		            <input type="submit" value="Submit">
		            </form>
		            </body>
		            </html>

color input

The color type of input element restricts the user to selecting a color.

Color values are expressed as exactly seven characters: a leading #, followed by three two-digit hexadecimal values representing the red, green, and blue values (for example, #FF1234 ).

		            <!DOCTYPE HTML>
		            <html>
		            <body>
		            <form method="post" action="">
		            <p>
		            <label for="color"> Color:
		            <input type="color" id="color" name="color">
		            </label>
		            </p>
		            <input type="submit" value="Submit">
		            </form>
		            </body>
		            </html>

search input

The search type of input element presents the user with a single-line text box for entering search terms.

		            <!DOCTYPE HTML>
		            <html>
		            <body>
		            <form method="post" action="">
		            <p>
		            <label for="search"> Search: <input type="search" id="search" name="search">
		            </label>
		            </p>
		            <input type="submit" value="Submit">
		            </form>
		            </body>
		            </html>

hidden input

To send data items to the server without showing them to the user, use the hidden input element

		            <!DOCTYPE HTML>
		            <html>
		            <body>
		            <form method="post" action="">
		            <input type="hidden" name="recordID" value="1234">
		            <input type="submit" value="Submit">
		            </form>
		            </body>
		            </html>

image input

The image type of input element creates buttons that display an image and submit the form when clicked.

alt - Provides a text description of the element
formaction - As for the button element
formenctype - As for the button element
formmethod - As for the button element
formtarget - As for the button element
formnovalidate - As for the button element
height - Specifies the height of the image in pixels
src - Specifies the URL for the image that should be displayed
width - Specifies the width of the image in pixels

		            <!DOCTYPE HTML>
		            <html>
		            <body>
		            <form method="post" action="">
		            <p>
		            <label for="name"> Name: <input value="XML" id="name" name="name">
		            </label>
		            </p>
		            <input type="image" src="accept.png" name="submit">
		            </form>
		            </body>
		            </html>

When the user clicks the image, the browser submits the form and includes two data items representing the x and y coordinates where the user clicked, relative to the top-left corner of the image.

The coordinates are provided to representing different regions on the image.

file upload input

The file input element uploads files to the server during the form submission.

accept - Specifies the set of mime-types that will be accepted. RFC2046 defines MIME types
multiple - Specifies that the input element can upload multiple files. At the time of writing, none of the mainstream browsers have implemented this attribute.
required - Specifies that the user must provide a value for the purposes of input validation

		            <!DOCTYPE HTML>
		            <html>
		            <body>
		            <form method="post" action="" enctype="multipart/form-data">
		            <p>
		            <input type="file" name="filedata">
		            </p>
		            <input type="submit" value="Submit">
		            </form>
		            </body>
		            </html>

You can upload files only when the encoding type for the form is multipart/form-data

When the user clicks the Choose File button, they are presented with a dialog that allows a file to be selected.

When the form is submitted, the contents of the file will be sent to the server