TIL/2020–12–26

Today is my 14th day learning with Treehouse’s Full Stack JavaScript Techdegree. In today’s course, we went back to studying some HTML since in this part of the techdegree I will be making a project that validates forms. So, we are studying the basics of how forms work as well as the different types of inputs and other form-related HTML elements. I thought I knew anything and everything about forms since I did work a lot on it with my Airbnb Clone project where I used Python, HTML, CSS and Django to have form-related features like sign up, log in, log out and more. But actually, after today’s lesson, I realized that there are still some small things I did not know about. It is good that I went over this again! Truly, there are more things to learn everyday. Regardless, these are just some small additional features but it is good to know them.

These are my notes:

Forms

2 attributes:

Action: URL that processes the information submitted by the form

Method: POST or GET — HTTP Method that the browser uses to submit the form

POST: Data on the body of the form is sent or posted

GET: Data is sent to the URL and parameters are separated by a ?

Input — Single line — self-closing

<input>

Textarea — Multiple lines — larger space to put text — not self-closing

<textarea></textarea>

Button types:

  • Submit: Submits the form with the help of the action and method attributes of the form
  • Reset: automatically clears all form data when clicked
  • Button: No default behavior — used in JS

<label for=””></label>

<input type=”” id=””>

The label tag associates itself to an input or an element inside the form if it has the for attribute. The for attribute matches with another form element is by id. The purpose of this is that when you select the label, the form element/input highlights itself. So in a way it is connected to one another. But the id and for attributes have to match for it to be connected.

Fieldsets and Legends: Organizing your code, Create logical groupings

Fieldsets: adds a little space for each fieldset on the form — similar to having a div

Label fieldsets with the legend element — legend is inside the fieldset

— — —

Select Menus

Options should always have the value attribute so that when we submit the form, we are getting the value of what the user selected. Because for input’s the value is what the user types but for select and option, we need to associate a value to each option.

Categorize you select options by having like a legend. We can use <optgroup label=””></optgroup>. The value of the label attribute is what shows up on the select element.

Select Menus are great if you have a lot of options — 6 or more

Radio Buttons 5 or less

For radio buttons, it deselects the other radio button you select because it has the same name attribute. It knows that the radio buttons are part of the same group. If you change the name attribute of each radio button then you are able to select both without the other one being deselected. The browser will think they are not part of the same group but different radio button groups. But if it has the same name attribute it is connected.

Don’t forget to add the value attribute

Checkboxes:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store