This content originally appeared on DEV Community and was authored by Nicholas Mendez
Getting into form ☑
Forms are a fundamental component of web applications. They allow us to validate and take input from users which become structured data in our databases. This post will go through some of the basics of forms.
The Form element & attributes
The form element is created with the form tab and has the following attributes:
- autocomplete: can disable the browser's autocomplete, values "on" or "off"
- method: specified the HTTP method, values "GET" or "POST"
- enctype: affects the MIME Type of the data submitted. Values:
- application/x-www-firn-urlencoded
- text.plain
- mutlitpart/form-data
Form input elements
It's important to use the appropriate input elements for the data needed. Some elements have a dedicated tag while others are attributes on the input tag.
- Selecting a single value from a list
- input[type="radio"]
- select
- datalist
- Selecting multiple values from a list
- select (with "multiple" attribute)
- input[type="checkbox"] multiple boxes with the same name
- Boolean Values: single checkbox
- Time : input[type= "week|time|datetime|date|week|month|datetime-local"]
- Numeric
- input[type="text" inputmode="numeric|decimal"]
- input[type="number"]
- input[type="range"], gives a slider (best used for small ranges)
- Files : input[type="file"]
- password : input[type="password"]
- Email : input[type="email"]
- Telephone : input[type="telephone"]
- URL : input[type="URL"]
Form validation
We can add simple validation to our forms to prevent them from submitting unless certain conditions are met.
This is done via validation attributes such as:
- required: field must contain a value
- minlength: specifies the minimum length of valid input
- pattern: field must match with the specified Regular Expression.
Inputs with type=email/url/telephone will also validate input appropriately.
Form Submission
By default, an HTML form element will make a GET request to the current URL and append the form data as a query string.
For Example the following form:
<form id="myform">
<input type="text" name="username"/>
<input type="password" name="password"/>
<submit>Send</submit>
</form>
Would redirect the browser to /?username=bob&password=pass when the form is submitted with the values 'bob' and 'pass'. Normally there would be code on the backend that will receive the data from the URL.
We can override these defaults with the method and action attributes mentioned earlier.
Alternatively, for single-page applications we can use javascript to prevent the page redirect and submit the form.
document
.querySelector('#myform')
.onsubmit = async function(event){
event.preventDefault();//prevent the form submission
const formData = new FormData(event.target);
//pull out all the data from the form
const data = Object.fromEntries(formData.entries());
const response = await fetch(
'/myserver',
{
method:'POST',
body:JSON.stringify(data)},
headers: { 'Content-Type': 'application/json'}
}
);//send data to the server
const text = await reponse.text;
alert(text); //alerts the server's reponse
}
The snippet above prevents the page redirect and sends the form data as JSON to the URL provided.
Going Deeper
You can see a more in-depth example at this
Repl that will allow you to change the content types and see the response from the server.
Conclusion
This concludes the basics of HTML forms as you can see, there's much you can accomplish with standard HTML and Javascript.
This content originally appeared on DEV Community and was authored by Nicholas Mendez
Nicholas Mendez | Sciencx (2021-05-02T03:39:14+00:00) Web Apps from scratch: Forms. Retrieved from https://www.scien.cx/2021/05/02/web-apps-from-scratch-forms/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.