Importance of Forms
Web forms are the primary method of data input for many of the applications we use every day.
Most people think of a contact form when the word “Form” comes to mind. See below.
Examples of forms in real life use:
The sign in page of any web app uses a form to request a username and password. A search box is a form with a single text input. A chat app uses a form to provide a place for a message to be typed and sent. Social media platforms provide a text entry form for compiling your posts before they are sent, some going so far as supporting rich inline multimedia Form Types
Although it’s very possible to build such applications without the use of form elements, it’s recommended to use them whenever you’re capturing input data.
HTML form elements are designed to be compatible with assistive software. A form’s input elements should be encapsulated withing a parent <form> element. Using a form element groups the inputs together and allows them to be sent to the server all at the same time. Which three inputs make use of a valid HTML5 form input type? Name Attribute
All form inputs and input groups need to have their name attribute specified. The name attribute is used as the key for each value when the form is submitted , so the name for each input must be unique and descriptive. Used when sending the form data. <Label> Element
Labels are added to a form using the <label> HTML element. id value are used to associate a label with an input. name and id of an input may be the same, but both are required to be specified. Submission
Most common way to do this is to add a submit button at the end of the form. Another type of <input> HTML element, with the type specified to “submit”. Clicking the submit button of a form causes the form to emit a submit event. Js can be used to add an event listener for this submit event, thus allowing the form data to be captured and processed. HTML forms also allow browser to offer an improved user experience based on the browser’s metadata Building form-like web experiences without actually using form elements almost always results in a low-quality experience. Metadata is important because it can be used to create a Semantic Website, where the meaning of the content is well-represented and allows the following: Allows the form to be machine-readable enables browsers to make smart decisions about how a form should be presented and interacted with.
There’s a list of common form element types that have been well established in HTML. They all use the <input> tag, which is self closing and doesn’t require a closing tag.
Text Area
Requires the use of the <textarea></textarea>. Allows for multiline text to be entered.
1. How are default values provided for each of the input types?
Default values for input types are provided using the value attribute in the <input> tag. For example, <input type="text" value="default text">. 2. Which attribute is used to organize radio buttons into groups?
The name attribute is used to group radio buttons together. All radio buttons with the same name value belong to the same group. 3. What are the two ways to create a "submit" button?
You can create a "submit" button using either <input type="submit"> or <button type="submit">. HTML5 Form Types
These new input types are additions to the set of basic form elements, and do not require any special treatment of the form itself in order be used.
When a browser does not support a specific input type it is generally safe for it to fall back to a plain text input.
Importance of Forms
The HTML4 form input types also offer a degree of built-in validation. Ex. Date Input will only allow the user to enter a date An email input will ensure that the value is a valid email address. This basic level of validation is handled by the browser, but custom input validation of input fields can be added using Js. 1. How can an email input be configured to accept multiple email addresses?
Use the multiple attribute in the <input> tag, like this: <input type="email" multiple>. <input type="email" id="email" name="email" multiple />
2. On mobile devices, what keyboard differences exist for a tel input compared to a number input?
The tel input typically brings up a keyboard optimized for entering phone numbers, often including numbers, asterisks (*), and the hash (#) key. The number input brings up a keyboard with just numbers and a decimal point.
HTML Form Elements
Datalist
The <Datalist> HTML element offers suggestions for an input field which can help a user determine what input is expected from a form.
The options are only suggestions and the user may still type anything they like in the field. This HTML element will also autocomplete as the user is typing their input. Appearance: The appearance of the datalist if different across browsers and platforms, with no way to customize the default appearance using CSS. The input can be styled, but not the suggestions. This input customization can be accomplished using JavaScript. By using a datalist, you can provide a list of options the user can select from to complete the field. To do this, define a datalist with an option element for each suggestion: <datalist>
<option>Detroit Lions</option>
<option>Detroit Pistons</option>
<option>Detroit Red Wings</option>
<option>Detroit Tigers</option>
<!-- etc... -->
</datalist>
To tie a datalist to an input element, give the input element a list attribute and the datalist an id attribute that match. Here’s an example: <label for="favorite_team">Favorite Team:</label>
<input type="text" name="team" id="favorite_team" list="team_list">
<datalist id="team_list">
<option>Detroit Lions</option>
<option>Detroit Pistons</option>
<option>Detroit Red Wings</option>
<option>Detroit Tigers</option>
<!-- etc... -->
</datalist>
How is the <datalist> element linked up with the input type?
Linking <datalist> with <input>: The <input> element is linked to the <datalist> by using the list attribute on the <input> and matching it with the id attribute of the <datalist>. How could you provide a custom label for each option?
Custom Labels: You can provide a custom label for each option by using the value attribute within the <option> tag inside the <datalist>. Which other input types can be used with a datalist?
Compatible Input Types: Datalists can be used with input types like text, search, email, url, and even range for sliders. Datalist Placement: The <datalist> element does not need to be defined directly alongside the associated <input> element in the HTML. However, it must be referenced correctly by the list attribute in the <input> tag, which matches the id of the <datalist>.
Input Types Affected: The input types that experience the most significant changes with the addition of a <datalist> are text, search, email, url, and range, as they gain enhanced user interaction with suggested options or ranges.
<input list="fruits" name="fruit" placeholder="Choose a fruit">
<datalist id="fruits">
<option value="Apple">
<option value="Banana">
<option value="Cherry">
<option value="Date">
<option value="Grape">
</datalist>
<input type="range" list="tickmarks" min="0" max="10">
<datalist id="tickmarks">
<option value="0" label="Low">
<option value="5" label="Medium">
<option value="10" label="High">
</datalist>
<input list="browsers" name="browser" placeholder="Choose a browser">
<datalist id="browsers">
<option value="Chrome" label="Google Chrome">
<option value="Firefox" label="Mozilla Firefox">
<option value="Safari" label="Apple Safari">
<option value="Edge" label="Microsoft Edge">
</datalist>
Keygen
The <keygen> HTML element was used to generate a key pair (a private key and a public key) in forms, typically for authentication purposes. The public key would be sent to the server, while the private key would remain on the client-side for cryptographic operations.
<keygen> element was created to provide a way to generate these key pairs: Store the private key to the local key store and send the public key to the server along with the user-submitted form data. This would guarantee future communication between the browser and server could then be carried out securely. The keygen element never had full support across all browsers and eventually became deprecated due to security concerns. It was unique to it’s ability to automatically make changes on the user’s OS when generating and storing keys. Web Crypto API
The Web Crypto API was the replacement for the keygen HTML element.
Uses entirely JavaScript to achieve the same goals as the the keygen HTML element. Key Pair is generated using the “generateKey()” method of the SubtleCrypto interface available as a top-level property on the window. <keygen name="login_form" keytype="RSA">
<form>
<label for="username">Username</label>
<input id="username" type="text" name="username">
<label for="password">Password</label>
<input id="password" type="password" name="password">
Unit 5: Forms
