Updated March 8th, 2020
In the beginning the
<form> element was the only way for browsers to send data to servers, then came file upload, and after that AJAX.
The essential format of a for element:
<form action="url" method="post"> <!-- Form contents --> <!-- Need at least one submit button --> <button type="submit">Your Button text</button> </form>
action: The URL (absolute or relative) of the page that will handle this form, i.e., where it will be submitted.
method: The HTTP method used by the form. Either “get” or “post”.
<input>s the following attributes are used:
name: This is submitted with the form to identify which of multiple inputs the value represents.
value: Submitted along with the form with its associated name.
id: Not submitted with the form
<form action="/my-handling-form-page" method="post"> <div> <label for="name">Name:</label> <input type="text" id="name" name="user_name"> </div> <div> <label for="mail">E-mail:</label> <input type="email" id="mail" name="user_mail"> </div> <div> <label for="msg">Message:</label> <textarea id="msg" name="user_message"></textarea> </div> <button type="submit">Send your message</button> </form>
Where form data is put in the HTTP message depends on the
getmethods encode form data as part of the URL
postmethods encode form data as part of the HTTP request mesage body. This is common when using forms that actually post data to a server.
POST / HTTP/1.1 Host: foo.com Content-Type: application/x-www-form-urlencoded Content-Length: 13 say=Hi&to=Mom
<fieldset>can be used to group a bunch of form elements
<legend>can be used to a “label” to the field set
<fieldset> <legend>A similar set of things</legend> <button>One</button> <button>Two</button> <button>Three</button> </fieldset>