Designing the App - Realtime Web Apps: With HTML5 WebSocket, PHP, and jQuery - page 97

Figure 6-15. The completed create-a-room form for the home view

Join-a-Room Form
To keep the design consistent, the join-a-room form will be stylistically identical to the create-a-room form; only the
inputs and copy will change.
In the interest of minimizing the barrier to entry for attendees, the only information required to join a room is the
room's number.
1.

Jump start this form by copying the create-a-room form into the right half of the page and
then eliminating two of the three inputs.

2.

Change the headline to read Attending? and the copy at the top to read, Join a room using
its ID.

3.

The label for the input should change to, What is the room's ID?

4.

Finally, the submit button's text should read, Join This Room.

5.

With those changes in place, the home page view should be complete with both forms
(see Figure 6-16 ).