Text input fields






Note that the form itself is not visible.

Also note that the default width of text input fields is 20 characters.

Radio Buttons

Choose your favorite Web language:



Checkboxes

The input type="checkbox" defines a checkbox:





The select Element

The select element defines a drop-down list:

Styling Textarea

Use CSS to change the size of the textarea:


Grouping Form Data with Fieldset

The fieldset element is used to group related data in a form, and the legend element defines a caption for the fieldset element.

Personalia:




The datalist Element

The datalist element specifies a list of pre-defined options for an input element.

The output Element

The output element represents the result of a calculation.

0 100 + =

The optgroup element

The optgroup tag is used to group related options in a drop-down list:



Password field

The input type="password" defines a password field:






Reset Button

The input type="reset" defines a reset button that resets all form values to their default values:






Show a Color Picker

The input type="color" is used for input fields that should contain a color.

Date Field

The input type="date" is used for input fields that should contain a date.

Local Date Field

The input type="datetime-local" specifies a date and time input field, with no time zone.

Email Field

The input type="email" is used for input fields that should contain an e-mail address:

File upload

Show a file-select field which allows a file to be chosen for upload:



A Hidden Field (look in source code)



Month Field

The input type="month" allows the user to select a month and year.

Number Field

The input type="number" defines a numeric input field.

You can use the min and max attributes to add numeric restrictions in the input field:

Search Field

The input type="search" is used for search fields (behaves like a regular text field):

Telephone Field

The input type="tel" is used for input fields that should contain a telephone number:





Format: 123-45-678

Show a Time Input Control

The input type="time" allows the user to select a time (no time zone):

If the browser supports it, a time picker pops up when entering the input field.

Display a URL Input Field

The input type="url" is used for input fields that should contain a URL address:

Display a Week Input Control

The input type="week" allows the user to select a week and year.

If the browser supports it, a date picker pops up when entering the input field.

Elements of type image are used to create graphical submit buttons, i.e. submit buttons that take the form of an image rather than text.

Sign in to your account: