HTML 20 💻 Forms Introduction
<form action=”/submit-form” method=”post” autocomple=”on” target=”_blank” novalidate enctype=”multipart/form-data”> <label for=”name”>Name:</label> <input type=”text” id=”name” name=”name”> <label for=”email”>Email:</label> <input type=”email” id=”email” name=”email”> <button type=”submit”>Submit</button> </form>
available values are submit: | reset | button
form element is used to create a form that users can fill and submit
a form element can have input, label, button elements and more
action attribute specifies the URL that the form data will be send to
To submit the form data the user has to click on the button
target attribute specifies where to display the response after submission.
like anchor element available options are:
_blank | _self | _parent | _top | frameName
autocomplete attribute enables/disables the autocomplete feature
novalidate attribute disables form validation
enctype attribute specifies the way the data will be encoded
application/x-www-form-urlencoded (default) | multipart/form-data (for uploading files) | text/plain (no encoding at all)
It must be used only with method=”post”
The method attribute specifies the HTTP method will be used to submit the form data
Available options for method GET | POST
GET sends the data as URL variables, query string
POST send the data as part of the request message itself.
POST can send larger amount of data than GET
POST is often used for sending data or uploading file
label elements show a text
It can also be read out loud by screen readers
label’s for attribute associates label with an input element
You use as for value the input’s element id
input element is the most commonly used element in forms
You can create text fields, checkboxes, radio buttons and more by modifying the type attribute
At the examples one input is for normal text, and the second for email
button element is used to create a clickable button with various purposes
In this form is used to submit the form
type attribute specifies the button’s behaviour