Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
4 views

06 HTML Forms

Uploaded by

chandramoulibogala43
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

06 HTML Forms

Uploaded by

chandramoulibogala43
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

HTML forms are an essential part of any website that collects data from users.

HTML5, the
latest version of HTML, has introduced many new form elements and attributes to make form
building easier, more accessible, and more interactive. Here are the most important HTML5
form elements and attributes:

Form Element:
The form element is used to create an HTML form. It contains all the form elements that collect
data from the user. The form element has several attributes:

action: Specifies where to send the data when the user submits the form.
method: Specifies the HTTP method used to send the form data to the server (GET or POST).

Input Element:
The input element is used to create form controls that allow the user to input data. The input
element has several attributes:

type: Specifies the type of input control to be displayed (e.g., text, password, checkbox, radio,
etc.).
name: Specifies the name of the input control. This name is used to identify the input control
when the form is submitted.
value: Specifies the default value of the input control.
placeholder: Specifies a hint to the user of what can be entered in the input control.
required: Specifies that the input control must be filled out before the form can be submitted.
autofocus: Specifies that the input control should automatically get focus when the page loads.

Label Element:
The label element is used to associate a label with a form control. When a user clicks on the
label, focus is automatically set to the associated form control. The label element has the for
attribute, which specifies the ID of the associated form control.

Select Element:
The select element is used to create a drop-down list. The select element has several attributes:

name: Specifies the name of the select control.


multiple: Specifies whether the user can select multiple options in the list.
size: Specifies the number of visible options in the list.
Option Element:

The option element is used to define an option in a drop-down list. The option element has
several attributes:

value: Specifies the value of the option.


selected: Specifies that the option should be selected by default.
Textarea Element:
The textarea element is used to create a multi-line text input control. The textarea element has
several attributes:

name: Specifies the name of the textarea control.


rows: Specifies the number of rows in the textarea.
cols: Specifies the number of columns in the textarea.

Button Element:
The button element is used to create a button control. The button element has several
attributes:

type: Specifies the type of button (submit, reset, or button).


name: Specifies the name of the button control.
value: Specifies the value of the button control.

Fieldset Element:
The fieldset element is used to group related form controls together. The fieldset element has
the legend element, which specifies a caption for the group of form controls.

explanation of some of the most common type values for the input element:

button: A clickable button with no default behavior.

checkbox: A checkbox that the user can check or uncheck.

color: A color picker control that allows the user to select a color from a color palette.

date: A date picker control that allows the user to select a date from a calendar.

datetime-local: A date and time picker control that allows the user to select both a date and a
time.

email: A text input control that allows the user to enter an email address. It also provides
validation to ensure that the entered value is a valid email address.

file: A file upload control that allows the user to select a file from their device to upload to the
server.

hidden: A hidden input control that is not displayed on the screen but can still be submitted with
the form.

image: A clickable image that acts as a submit button.


month: A month and year picker control that allows the user to select a month and year.

number: A text input control that allows the user to enter a numeric value. It also provides
validation to ensure that the entered value is a number.

password: A single-line text input control that masks the entered characters with asterisks or
bullets. It is used for sensitive information such as passwords.

radio: A radio button that the user can select from a group of options. Only one option can be
selected at a time.

range: A slider control that allows the user to select a value from a range of values.

reset: A clickable button that resets the form to its initial values.

search: A text input control that is used for search fields.

submit: A clickable button that submits the form.

tel: A text input control that is used for telephone numbers.

text: A single-line text input control for the user to enter text.

time: A time picker control that allows the user to select a time from a dropdown list. The time is
entered in the format hh:mm.

url: A text input control that allows the user to enter a URL. It also provides validation to ensure
that the entered value is a valid URL.

week: A week picker control that allows the user to select a week of the year.

You might also like