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

HTML Forms - Notes

The document discusses HTML forms, which are used to collect user input data that is often submitted to a server. Key elements of forms include the <form> tag, input fields like text, email, radio buttons and checkboxes, and buttons. The <form> tag contains these elements and has attributes like action and method that control form submission. Input fields use attributes like type, name and placeholder. Other elements like <textarea>, <label>, and <button> are also important parts of forms.

Uploaded by

Jagan Panda
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
271 views

HTML Forms - Notes

The document discusses HTML forms, which are used to collect user input data that is often submitted to a server. Key elements of forms include the <form> tag, input fields like text, email, radio buttons and checkboxes, and buttons. The <form> tag contains these elements and has attributes like action and method that control form submission. Input fields use attributes like type, name and placeholder. Other elements like <textarea>, <label>, and <button> are also important parts of forms.

Uploaded by

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

HTML Forms

Topics Covered:
● What are HTML Forms and its purpose?
● What are the important attributes of form tag?
● What are input elements and their types?
● What are the important attributes of input elements?
● What are the important HTML elements included in Forms?

Topics in Detail:
HTML Forms:
● HTML Form is a part of a document, used to collect and store user information/data.
● The collected information is often sent to the server for processing.
● Form can contain the input elements like input text boxes, input text areas, labels,
checkboxes, radio buttons, submit button, etc…
● The form can contain different elements for collecting username, password, email id,
Date of birth, check box, radio buttons…
● HTML Forms can be created by using <form></form> tag.
● Code:

● Output:

1
HTML Form Attributes:

Attributes Purpose

action Defines the action to be performed when the form is submitted.

method Defines the HTTP method to be used while submitting the form.

Method Description

get After submission of form, form values will be visible in the


address bar of the browser tab. So for sending sensitive
information the get method should not be used.

Length of the url is limited.(2048 characters)

Form submission with get method can be bookmarked.

post After submitting the form the values will not be visible in the
address bar.

No size limitations, large amounts of data can be sent.

Form submission with post method cannot be bookmarked.

target Defines the place where the response(received after submitting the form)
is to be displayed.

Value Response displayed in

_blank New tab.

_self Current window.

_parent Parent frame.

_top Full body of the window.

autocomplete Defines whether the form should have autocomplete on or off.

on Browser automatically completes values based on previous inputs.

off Browser will not support autocomplete functionality.

2
Input element in HTML Forms:
The <input> element is used to get input from the user. The <input> element can be displayed in
many ways depending on the type attribute. The default value of the type attribute is text.

Some of the important values of type attribute are described as follows:


type attribute values Description

<input type= “text”> Text input field

<input type= “email”> The user input should contain an email address when submitting the
email validation will be done automatically.

<input type= “submit”> Displays a submit button, for submitting a form.

<input type= “button”> Displays a clickable button.

<input type= “radio”> Displays radio button, to select one of multiple options.

<input type= “checkbox”> Displays checkbox, to select zero/one/multiple options.

<input type= “date”> The user field should contain a date, it does date validations

<input type= “number”> Numeric input field, the restriction can be made to accept only a specific
set of numbers.

<input type= “tel”> The user input should contain a telephone number.

Attributes of input element:

Some of the important input attributes are as follows:


Attribute Values Description

class Name of the class Specifies one or more class names for the element. Used to
apply styles.

id Unique if of the element Used to apply styles and scripts.

name Name of the element Used to refer to the element in JavaScript.

placeholder Any name Specifies a short hint of the expected value.

required When present specifies, the input field must be filled before submitting the form.

type text, number, email, Specifies the type of input that the user should enter before
button... submitting the form.

3
Input elements in Static LinkedIn page:

Important HTML elements included in Forms:

<textarea>
● The text area is a multiple-line text input field.
● The text area is often used in a form to collect user information like comments,
messages, reviews, etc…
● Example:

● The Attributes rows and cols are used to specify the size of the text area.

4
<label>
● Label defines what to be entered in the input fields.
● Labels are optional in forms.
● Example:

● The attribute for is used to define for which input field this label is used.

<button>
● The <button> tag defines the clickable button.
● The <button> tag also has the type and class attribute which is the same as the <input>
tag.
● Example:

● The attribute onclick defines what should happen on the click of a button.Usually it is
used to call JavaScript functions.

You might also like