Have you ever been on a site, where you could write to the company?
It is smart right? You can do the same, here is how.
Web forms are a very powerful tool for interacting with users. They are often used to collect data from the user or allowing them to control the user interface.
The best known form on the web is probably the search box that sits right in the middle of Googles homepage.
How to structure a form
We must tell the browser that we want a form. Therefore are we going to use the form tag. Normally you insert the form tag inside a section tag.
Inside the form are there some elements and controllers
The label tag represents a caption for an item in a user interface.
The label text is not only visually associated with the input tag. It is programmatically associated with it too. This means that, for example, a screen reader will read out the label when the user is focused on the form input,
making it easier for an assistive technology user to understand what data should be entered.
You can click on tabel to activate the input, as well as the input itself.
If you want to associate the label with an input element, you need to give the input an ID attribute. The label tag then needs a for attribute whose value is the same as the input's ID.
But you can also nest the input tag inside the label tag
We have input fields in forms
input elements of type text create basic single-line text fields.
input elements of type email creates a single-line text field that accepts only e-mail addresses
input elements of type number only accepts numbers
input elements of type password hides the text inside it
textarea allow users to enter a sizeable amount of free-form text
We have seen a lot of elements with many different attributes. Here is an overview of them. name - A name attribute to set the name of the associated data point submitted to the server when the form is submitted. type - Are used in input fields to tell the browser what data the input field has. for - Are used when you work with labels to indicate which form element they belong to. The element must have an ID to connect the 2 tags. value - Are used if you want data to be inside the input field.
There are many types of from controls that you can use to collect information from visitors.
When you make a form with some controls is it important to make a form element around. You can make a label, so the user knows what they should write in the input fields.
We have radio buttons
It is a good idea to group radio buttons together
Checkboxes are another type of input fields
It is a good idea to group checkboxestogether
select element represents a control that provides a menu of options
A progress bar represents a value that changes over time up to a maximum value specified by the max attribute
It is important with a button, when you have made your contact form, so you can send your data.
We can also reset the input fields with a little help from a button.
Send your data
The data you have in the contact form can you send to another site. We must talk about the 2 attributes the form tag can have.
The action attribute defines where the data gets sent. Its value must be a valid relative or absolute URL. If this attribute isn't provided, the data will be sent to the URL of the page containing the form — the current page.
Form without a method GET and an action URL
There are no URL or file in the action attribute therefore will the information from the form be in the URL
Form without a method GET, but with an action URL
There are now an URL in the action attribute, therefore will we now be sent over to the site, but the data will still be in the URL
The reason why it stand there. Is becuase, we have used the get method
Form with a method POST and an action URL
The POST method move the information from the URL into the body of af server request
Use the <label> element, and, in specific cases, other mechanisms (e.g. WAI-ARIA, title attribute etc.), to identify each form control
Grouping related form controls makes forms more understandable for all users, as related controls are easier to identify. It also makes it easier for people to focus on smaller and more manageable groups rather than try to grasp the entire form at once.
In addition to providing instructions, validate user input to help users avoid mistakes. HTML5 defines a range of built-in functionality to validate common types of input, such as email addresses and dates