# Forms HTML forms allow users to interact with websites by submitting data. ##### Form attributes - `action`: A URL where the form should send its data. - `method`: The HTTP request method to submit the form. - Use GET when retrieving and POST changing something on the server. ##### Form elements - `<form>`: The main container element that defines the form. - `<input>`: Creates various types of input fields. - `text`, `password`, `email`, `number`, `checkbox`, `radio`, `file`, `submit`, `reset`. - `<textarea>`: Input multiline text. - `<select>` and `<option>`: Create a dropdown list for selecting options. - `<button>`: Represents a clickable button for form submissions or other actions. - `<label>`: Provides a label for form elements, enhancing accessibility and usability. - `<fieldset>`: Groups several controls as well as labels. Form inputs should always have a `name` attribute, essentially a variable name for the input. <form action="https://example.com/path" method="post"> <div> <label for ="first_name">First Name:</label> <input type="text" id="first_name" name="first_name" placeholder="Jane"> </div> <div> <label for="user_email">Email:</label> <input type="email" id="user_email" name="email" placeholder="[email protected]"> </div> <div> <label for="user_password">Password:</label> <input type="password" id="user_password" name="password"> </div> <div> <label for="dob">Date of Birth:</label> <input type="date" id="dob" name="dob"> </div> <div> <label for="car_type">Car type:</label> <select name="car_type" id="car_type"> <option value="mercedes">Mercedes</option> <option value="volvo">Volvo</option> <option value="ford">Ford</option> </select> </div> <fieldset> <legend>Ticket type</legend> <input type="radio" id="child" name="ticket_type" value="child"> <label for="child">Child</label> <input type="radio" id="adult" name="ticket_type" value="adult" checked> <label for="adult">Adult</label> </fieldset> <div> <button type="submit">Submit</button> <button type="reset">Reset</button> </div> </form> >[!WARNING] Button behavior in Forms >Buttons within a form will default to the `type` of `submit`, which will make a request to submit data. For buttons used in forms that do not submit data, the type attribute should be explicitly set to either `button` or `reset`. # Client-Side Form Validation Form validation ensures that data entered by users meets the specified requirements and is in the correct format before submitting the form. Validation should be done both client-side and server-side. Client-side validation can be bypassed by users who disable JavaScript or manipulate the HTML. Form controls that have passed or failed validations can be targeted using the `:valid` and `:invalid` pseudo-classes respectively. ## Built-in form validation HTML5 introduces built-in validation attributes that can be added to form elements: - `required`: The field must be filled out before submitting the form. - `pattern`: A regular expression the input must match. - `min` & `max`: The minimum and maximum values for numeric inputs. - `minlength` and `maxlength`: The length for text inputs. - `type`: The type of input (e.g. email, url, number) for basic validation. ## Validation using JavaScript The Constraint Validation API consists of a set of methods and properties available on form element DOM interfaces. #### Methods - `checkValidity()`: true if the element's value has no validity problems. - `reportValidity()`: reports invalid field(s) using events. - `setCustomValidity(message)`: Adds a custom error message to the element. #### Properties - `validationMessage`: describes the validation constraints that the control doesn't satisfy (if any). - `willValidate`: indicates if the element will be validated when the form is submitted. - `validity`: Returns a `ValidityState` object describing the validity state of the element. ##### ValidityState Object Describes the validity state of the element. Some of the more common properties include: - `valid`: true if the element's value is valid. - `valueMissing`: true if the element's required value is empty. - `typeMismatch`: true if the element's value is not the correct syntax for the specified type (e.g. an invalid email format). - `patternMismatch`: true if the element's value does not match the specified `pattern` attribute. - `rangeOverflow` & `rangeUnderflow`: true if the element's value is greater than or lesser than the `max` and `min` attributes.