Input Type Text

Type is an attribute used within the input element. There a various type of data that can be assigned to the type attribute. Under this heading we will discuss the type TEXT. The text value is used to define the text input fields. It is used as follows:

<input type = “text”>

EXAMPLE

We have already explained:

<form action = “ http://side.edu/cgi-bin/send-message” >

<p> first name: <input type=”text” id=”first name” /></p>

<p> last name: <input type=”text” id=”last name” name=”lastname”/></p>

<p><input type=”submit” value=”submit”/></p>

In this example the text has defined first name and last name, this will produce the following result:

Input Type Password

This value is used when you don’t want the user or anyone else to see the input data. To illustrate consider the following example:

EXAMPLE

<form action = “ http://side.edu/cgi-bin/send-message” >

<p> Enter your E mail address: <input type=”text” /></p>

<p> Enter your password: <input type=”Password”/></p>

<p><input type=”submit” value=”submit”/></p>

The result is as follows:

Input Type Checkbox

This is a type value that is enables the user to answer a yes or no. No data is sent to the field if the checkbox is not checked. It is used as follows:

<input type = “checkbox”>

EXAMPLE

<form action = “ http://side.edu/cgi-bin/send-message” >

<p>Which pet do you have </p>

<form>

<input type = “checkbox” name = “Pet name1” value = “Goat” > Goat<br>

<input type = “checkbox” name = “Pet name2” value = “Fish” > Fish <br>

<input type = “checkbox” name = “Pet name3” value = “parrot” > Parrot <br>

</form>

Input Type button

This is used as follows:

<input type = “button”>

EXAMPLE

<input type = “button” value = “Click this HTML button” ><br>

This will generate the following result:

Input Type Submit

This can be displayed using the following method:

<input type = “submit”>

This will allow the page to submit the data of the form.

EXAMPLE

<form action = “ http://side.edu/cgi-bin/send-message” >

<p> first name: <input type=”text” id=”first name” name = “lastname” /></p>

<p> last name: <input type=”text” id=”last name” name=”lastname”/></p>

<p><input type=”submit” value=”submit”/></p>

Resulting in:

Input Type Reset

This is used to reset all the values in the form or the original values. It is used as follows:

<input type = “reset” >

EXAMPLE

<form action = “ http://side.edu/cgi-bin/send-message” >

<p> first name: <input type=”text” id=”first name” name = “lastname” /></p>

<p> last name: <input type=”text” id=”last name” name=”lastname”/></p>

<p><input type=”submit” value=”submit”/> <input type = “reset” /></p>

</form>

Resulting in:

Input Type Radio

This button is used to select only one option from the given list unlike the checkbox through which we can select more than one option. It is used as follows:

EXAMPLE

<form action = “ http://side.edu/cgi-bin/send-message” >

<p>Which pet do you have </p>

<form>

<input type = “radio” name = “Pet name1” value = “Goat” > Goat<br>

<input type = “radio” name = “Pet name2” value = “Fish” checked> Fish <br>

<input type = “radio” name = “Pet name3” value = “parrot” > Parrot <br>

</form>

In the above example, we checked the dog option when coding by using checked.

HTML5 Input types

Input type Number

This value is used to define the numbers field. It includes numeric data.

EXAMPLE

The following example will illustrate it:

<form action = “ http://side.edu/cgi-bin/send-message” >

<input type=”number” name=”b” value= “70” /> +

<input type=”number” name=”a” value= “20” />

</form>

This will result as follows:

In the above example the input type is numeric type that is you can insert numbers that are saved in b and a.

Input Type date

This is used as a control to enter the date in the input field. It is used as follows:

<input type = “date”>

EXAMPLE

The following example will illustrate it:

<form>

Registration Date in the university:

<input type = “date” name = “Registration Date”>

</form>

This will result as follows:

Input Type Color

This is used to select or specify a color for input fields. It is used as follows:

<input type = ”color”>

EXAMPLE

The following example will illustrate it:

<form>

Select a color you want:

<input type = “color” name = “color” value = “#0000FF”>

</form>

This will result as follows:

Input Type Range

This type of input is used to specify the range of values. It is used as follows:

<input type = “range” >

EXAMPLE

The following example will illustrate it:

<form action = “ http://side.edu/cgi-bin/send-message” >

<input type = “range” name = “range” min = “0” max = “10”>

</form>

This will produce the following result:

We set the minimum range to zero and the maximum range to 10.

Input Type month

This type of input is used to select the month and the year. It is used as follows:

<input type = “month”>

EXAMPLE

The following example will illustrate it:

<form action = “ http://side.edu/cgi-bin/send-message” >

Month and Year of Registration in the University:

<input type = “month” name = “registrationMonth”>

</form>

This will produce the following result:

You can enter the month and the year of university registration in the specified input field that is shown above.

Input Type Week

This input type is used to select or specify the week. As an example we can say that it allows selecting the week in which you registered yourself in the university. It is used as follows:

<input type = “week”>

EXAMPLE

The following example will illustrate it:

<form action = “ http://side.edu/cgi-bin/send-message” >

Enter week of Registration in the University:

<input type = “week” name = “registrationWeek”>

</form>

This will produce the following result:

Input Type Time

Using this type of input will allow the user to input the time any value other than zero. It is used as follows:

<input type = “time” >

EXAMPLE

The following example will illustrate it:

<form action = “ http://side.edu/cgi-bin/send-message” >

What is the Time:

<input type = “time” name = “Time”>

</form>

This will produce the following result:

You can enter the time in the input field.

Input Type Datetime-local

This type will allow the user to enter the date and time at the same time in the input field. It is used as follows:

<input type = “Datetime-local” >

EXAMPLE

To understand this, consider the following example:

<form action = “ http://side.edu/cgi-bin/send-message” >

Registration Date and Time:

<input type = “datetime-local” name = “RegistrationTime”>

</form>

This will produce the following result:

Input Type Email

This type of input supports the email address. This contains a single valid email address. It is used as follows:

<input type = “email” >

EXAMPLE

Consider the following example:

<form action = “ http://side.edu/cgi-bin/send-message” >

Enter a valid Email address:

<input type = “email” name = “email”>

</form>

The result of this HTML document is as follows:

Input Type Search

This type of input is used to search a single string. It is used as follows:

<input type = “search”>

EXAMPLE

It is used as follows:

<form action = “ http://side.edu/cgi-bin/send-message” >

Search what you want to:

<input type = ” search” name=”searching”>

</form>

This will produce the following result:

Input Type Tel

This type of input is simply used to input the telephone number in the input field. It is used as follows:

<input type = “tel”>

EXAMMPLE

Consider the following example to understand it:

<form action = “ http://side.edu/cgi-bin/send-message” >

Enter your Telefone number:

<input type = ” tel” name=”telefoneNumber”>

</form>

You can enter your telephone in the specified field.

Input Type URL

This is used to input URL. It is used as follows:

<input type = “URL”>

EXAMPLE

To understand this, consider the following example:

<form action = “ http://side.edu/cgi-bin/send-message” >

Enter the url of page you want to open:

<input type = “URL” name=”UrlOfPage”>

</form>

This will produce the following result: