HTML Forms: CheatSheet

#buildTogether Day 22/100

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.

Forms

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 ;)

Creating Forms

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.

Example Code:

Methods:

• get method is designed to obtain the required information and pass the data in the address bar, used by default if not specified.
• The post method 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.

Input Elements

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

Text Fields

You can create a single-line text input field for the user to enter this information:

The 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.

Password Field

The characters entered in the password field are masked. They are displayed as black dots.

Radio Buttons

These allow the user to select only one of the given options.

Checkboxes

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.

Label

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.

With <label> tag, you can select the desired form element by both selecting the checkbox/radio button and the text that refers to it.

The <label>tag has a for attribute that helps link the item with the text, regardless of its location. For instance,

The same value for id and for attributes does the magic ;)

Buttons

The paired <button> tag helps transfer the input data to the action specified in the form.

<form action="[value]" method="[value]">
  <button type="submit">Submit</button>
</form>

That is all Folks! I will keep updating this post as I come across more elements :D