In the library again. The library is empty, with it being Friday. Today’s project is making a registration form. I worked mainly on HTML and a bit in CSS just to clean up the page a little. As I go through my notes here, it doesn’t seem like I did a lot today, but my brain feels like I did so much.
In CSS, I learned about vh units. The vh unit stands for viewport height and is relative to 1% of the height of the viewport.
.body {
width: 100%;
height: 20vh;
background-color: blue;
}Now onto forms. A form is used to collect user input. These are the elements I have learned today for forms.
We first start with the <form> element to create the form. Then we have the <input/> element, the most used element in a form. Input is also self-closing. It can be displayed in many ways, depending on its type:
<input type="text" />
<input type="radio" />
<input type="checkbox" />
The method attribute specifies how to send form data to the URL specified in the action attribute. The form data can be sent via a GETrequest as URL parameters (with method="get") or via a POSTrequest as data in the request body (with method="post").
<form method="post" action='https://url.com'></form>Following accessibility best practices, link the input elements and the label elements together using the for attribute.
<label for="first-name">Enter your first name:<input id="first-name" type="text" required /></label>
Specifying the type attribute of a form element is essential for the browser to know what kind of data it should expect. If the type is not specified, the browser will default to text.
To make the form more interactive, the required attribute needs to be added to the input element. If one tries to submit the form without filling in the required fields, an error message will pop up.
Here are resources, freecodecamp, w3schools, dev.to
