Note at the end of this markup, I have a paragraph (highlighted)
that will normally be hidden but which will be displayed if the user
makes an error such as entering an invalid password and needs to
be prompted to try again (Figure 6.22). Right now the class attribute
has no value, but if we set that value to error, the paragraph
will appear on the page. We??™ll see how this works in a moment.
FIGURE 6.22 An error message can
be displayed if the username or
password is incorrect.
There is also an unordered list that holds two links that are always
needed with this type of sign-in component. The Sign Up link would
take a nonmember to a page (not shown) to sign up and create a
username and password if he hasn??™t done so before. For a current
member, there is a Lost Password link to a page (not shown) where
he can request his lost password be sent to his registered email
address.
I start the related CSS by removing the margins from every element
and setting a small overall size for the text. Note all the sizes are set
in ems so that this layout scales perfectly if the user changes the
overall font size. This even includes the width of the containing element,
whose 8 ems width equates to 128 (16 times 8) pixels.
end tiny log-in form
end column div
The actual testing of the validity of
the submitted data, and the adding
of the class to make it display, must
be done using server-side middleware
such as PHP.
Pages:
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242