HTML Forms: CheatSheet
Today was a long day, Phewww. I took a break from BookLog Application and continued with concepts for the Flashcard project as I was successful in fixing the issue with the Flexbox layout.
are designed to send data from a web page to a server that can process it. Social Networks, online shops, dating sites make use of such forms for information exchange. I studied some elements that may be could work as a cheat sheet for a quick form creation ;)
The form is created by using the paired
<form> tag. It has two important attributes:
actionspecifies the address of the program or document that processes the data of the form;
methodinforms the server of the request method
Attributes extend the capabilities of individual tags.
getmethod is designed to obtain the required information and pass the data in the address bar, used by default if not specified.
postmethod is used when you need to send a lot of data to the server, eg if databases need to be populated, mail services, or sending files.
As the name suggests, these are used to enter information. They are created by using
<input> tag (no closing needed). Different input types are available: text fields, password, radio buttons, submit buttons, etc
You can create a single-line text input field for the user to enter this information:
name attribute specifies a unique name for a form element. This name is used when data is sent to the server. The default width of the text field is 20 characters.
The characters entered in the password field are masked. They are displayed as black dots.
These allow the user to select only one of the given options.
Checkboxes allow the user to select any number of options from the list. The
<br> tag is used to move the element to the next line in case they are placed together.
This element links the text to the form element. The tag does not show itself visually. If clicking on the text activates a nearby form element, it means
<label is linked and it works.
<label> tag, you can select the desired form element by both selecting the checkbox/radio button and the text that refers to it.
<label>tag has a
for attribute that helps link the item with the text, regardless of its location. For instance,
The same value for
for attributes does the magic ;)
<button> tag helps transfer the input data to the action specified in the form.
<form action="[value]" method="[value]">
That is all Folks! I will keep updating this post as I come across more elements :D