Scribd
Upload
16 views23 pages

WINSEM2024-25 BCSE203E ELA VL2024250504384 2025-01-02 Reference-Material-I

Uploaded by

akshatkhandelwalunofficial
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views23 pages

WINSEM2024-25 BCSE203E ELA VL2024250504384 2025-01-02 Reference-Material-I

Uploaded by

akshatkhandelwalunofficial
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

HTML FORMS

1. HTML Forms
2. HTML Form Attributes
3. HTML Form Label
4. HTML For fieldset
5. HTML Form Button
6. HTML Form Input
7. HTML Form Input Type
8. HTML Form Select
9. HTML Form textarea
10. HTML Form output
11. HTML Form Validation
1. HTML Forms
• Forms are the HTML mechanism for gathering input from the user.

• To create a basic form, you need three elements: the form, input, and button elements.
<html>
<body>
<form>
<input name="name" />
<button>Submit</button>
</form>
</body>
</html>
2. HTML Forms Attributes
HTML Forms : Method

The allowed values are get and post, which correspond to the HTTP GET
and POST methods.

The following code, set the post value for the form.

Additional Methods: PUT, HEAD, DELETE, PATCH,OPTIONS


GET is used to request data from a specified resource.
Note that the query string (name/value pairs) is sent in the URL of a GET

Additional : GET requests

GET requests remain in the browser history


GET requests can be bookmarked
GET requests should never be used when dealing with sensitive data
GET requests have length restrictions
GET requests are only used to request data (not modify)
The POST Method
• POST is used to send data to a server to create/update a resource
• The data sent to the server with POST is stored in the request body of
the HTTP request:
• POST is one of the most common HTTP methods.
• Additional : POST requests
► POST requests are never cached
► POST requests do not remain in the browser history
► POST requests cannot be bookmarked

► POST requests have no restrictions on data length


GET vs POST
GET POST
BACK button/Reload Harmless Data will be re-submitted (the browser should alert the user that
the data are about to be re-submitted)

Bookmarked Can be bookmarked Cannot be bookmarked


Cached Can be cached Not cached
Encoding type application/x-www-form-urlencoded application/x-www-form-urlencoded or multipart/form-data.
Use multipart encoding for binary data

History Parameters remain in browser history Parameters are not saved in browser history
Restrictions on data Yes, when sending data, the GET method adds the No restrictions
length data to the URL; and the length of a URL is limited
(maximum URL length is 2048 characters)

Restrictions on data Only ASCII characters allowed No restrictions. Binary data is also allowed
type
Security GET is less secure compared to POST because data POST is a little safer than GET because the parameters are not
sent is part of the URL stored in browser history or in web server logs
Never use GET when sending passwords or other
sensitive information!

Visibility Data is visible to everyone in the URL Data is not displayed in the URL
Additional Methods:
• The PUT Method
• PUT is used to send data to a server to create/update a resource.
• The difference between POST and PUT is that PUT requests are idempotent.
• Calling the same PUT request multiple times will always produce the same result.
• In contrast, calling a POST request repeatedly have side effects of creating the
same resource multiple times.

• The HEAD Method


• HEAD is almost identical to GET, but without the response body.
• In other words, if GET /users returns a list of users, then HEAD /users will make the
same request but will not return the list of users.
• HEAD requests are useful for checking what a GET request will return before
actually making a GET request - like before downloading a large file or response
body.
Additional Methods:
• The DELETE Method
• The DELETE method deletes the specified resource

• The OPTIONS Method


• The OPTIONS method describes the communication options for the target
resource

•The PATCH Method


• The PATCH method provides an entity containing a list of changes to be
applied to the resource requested using the HTTP Uniform Resource Identifier
(URI).
HTML Forms : Action
• The purpose of the HTML action attribute is to specify the URL of a
form processor
• Type of value - Type of value of HTML action attribute is an URL.
• Value - A URL containing a form processing script.
• Default value- There is no default value of HTML action attribute.
• Syntax
<form action=" URL">
• Possible values:
An absolute URL - points to another web site
(like action="http://www.example.com/example.htm")
A relative URL - points to a file within a web site
(like action="example.htm")
HTML Forms : Enc pe
• The enctype attribute specifies how the browser encodes and
presents the data to the server.
• There are three allowed values for this attribute
►► application/x-www-form-urlencoded
Default encoding
► This encoding cannot be used to upload files to the server

► multipart/form-data
► This encoding is used to upload files to the server

► text/plain
► This encoding varies between browsers
HTML Forms : Enctype
application/x-www-form-urlencoded encoding
• The name and value of each data item is encoded using the same scheme that is used to encode
URLs.
• Special characters are replaced with their HTML entity counterpart.
• The name of the data item and the value are separated by the equals sign (=) and data/value
tuples are separated by the ampersand character(&).
multipart/form-data
• The multipart/form-data encoding tends to be used only for uploading files.
text/plain
• The mainstream browsers encode data in different ways for this encoding.
• Google Chrome encodes data in the same way as for the application/x-www-form-urlencoded
scheme, whereas Firefox encodes the data as follows:
fave=xml
name=example.com
Each data item is placed on a line, and special characters are not encoded.
HTML Forms : accept-charset
Value Description
_blank The response is displayed in a new window or tab
_self The response is displayed in the same frame (this is default)
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the window
framename The response is displayed in a named iframe
HTML Forms : autocomplete

on Default. The browser will automatically complete values based on values that the user has
entered before
off The user must enter a value into each field for every use. The browser does not
automatically complete entries
Attributes: for, form

<label for="black">BLACK <input /></label>

</p>
Example 1
<form method="post" action="http://example.com/form">/></label>
<fieldset> </p>
<p>
<fieldset>
<legend>Enter Your Details</legend>
<p>
<label for="name">Name: <input id="name" name="name" /></label>
</p>
<p>
<label for="name">City: <input id="city" name="city" /></label>
</p>
</fieldset>
<fieldset>
<legend>Vote For Your Three Favorite Fruits</legend>
<p>
<label for="favel">#l: <input id="favel" name="favel" /></label>
</p>
<p>
<label for="fave2">#2: <input id="fave2" name="fave2" /></label>
</p>
<p>
<label for="fave3">#3: <input id="fave3" name="fave3" /></label>
</p>
</fieldset>
Example 1 Example 2
5. HTML Form Button
• There are three ways you can use button by setting the three
different type attribute.
• submit - Specifies that the button will be used to submit a form
• reset - Specifies that the button will be used to reset a form
• button - Specifies that the button has no specific semantic significance

submit button - Submit Forms


• When you set the type attribute of a button to submit, pressing the
button will submit the form that contains the button.
• This is the default behavior when you have not applied the type
attribute.
submit button - Submit Forms
Submit button have some additional attributes listed

associated.
formaction - Overrides the action attribute on the form element, and

formenctype - Overrides the enctype attribute on the form element,


and specifies the encoding scheme for the form data.
formmethod - Overrides the method attribute on the form element.
formtarget - Overrides the target attribute on the form element.
formnovalidate - Overrides the novalidate attribute on the form to
specify whether client-side validation should be performed.
reset button - Reset form
generic button

Syntax

Syntax

<button type="submit">Submit</button>
<button type="button"><img src="http://www.example.com/style/download.png" alt="submit"
/></button>

You might also like