Form Mastery - HTML5 Mastery: Semantics, Standards, and Styling - page 173

Figure 4-30. The first form on the City Press “submit a tip” form

To create this form, first we need a form element. We'll set two attributes: action ,
which will go to our second form page, and method . Which method do we need? GET
or POST? Well, the users will be submitting data that will likely end up in a database, so
it's a submission that will actively be modifying data. So, we use POST. Also, it should
be a big hint to use POST if a password input field appears on the form, which it does.
OK, this is our starting form:
<form action="form2.php" method="post">
</form>
Next, although the form is spread across two pages, there are three steps to progress
through the form, since there will be a confirmation page after the data is submitted, so
we should add a progress element to show that:
<form action="form2.php" method="post">
<p>Progress:

<progress value="0" max="2">1/

3</progress></p>
</form>
Notice the value attribute is set to zero and the max is set to two, but the alternative
content text is “1/3.” This is because we will have three steps to complete: the first form,
the second form, and a confirmation page after the second form is submitted. So the al-
ternative text will go 1/3, 2/3, 3/3, while the value attribute will go 0, 1, 2.
Next we see that we need the user to create a username and password (presumably
they would be able to log in elsewhere after going through this process), which we can
separate into its own fieldset. A legend is used to add a title to the fieldset, and the text
and password input fields are set to be required. Also, placeholder text is added to both.
A regex pattern is added to the password field so that it will only accept passwords that
are six characters or longer.
…
<fieldset>
<legend>Register New User</legend>
<p><label>Username: <input type="text" name="username"
placeholder="enter a new username"
required/></label></p>
<p><label>Password: <input type="password"
name="password" placeholder="6 digits or more"
pattern="^.{6,}" required/></label></p>