So this is the phone we are going to create for this example, and if we scroll down and have a look for the final result, you can see that I have played some visual games with the phone fields themselves. But also I have brought everything together inside a design which really closely ties in with the rest of the design of the site. So let us walk through the stages and see how this forms been put together.
So I have pulled up the source code, the meaningful XH team mark up which forms the foundation of this form. And if we just run through some of the elements that are being included and talk a little bit about the mark-up and what makes this form distinctive.
First of all we are opening up our form element and giving that an ID of club, each of the sections of the form. Each of the sets of data are marked-up using meaningful fields of elements. And because we want to style each one slightly differently, we have given each of the field sets a unique ID.
Now it is very important for accessibility that each form element that we add on to a page be that a text input or text area, or a select menu, or perhaps even a checkbox is given a unique label, and that label is going to be read out by screen radars or other assisted devices to help people the need that extra assistance.
So the way of this form is being constructed, is the inside each field set. We have a label element. But because I need to style this in different ways like later on, what I have done is to include the form input itself inside the label element. And that is a perfectly reasonable thing to do.
Transcription by:
Scribe4you Transcription Services