Creating HTML and CSS Markup - Realtime Web Apps: With HTML5 WebSocket, PHP, and jQuery - page 116

Figure 7-7. The header and footer at different screen sizes
Developing the Home Page View
With the app's frame ready, you can now start plugging in the guts of individual views, starting with the home page.
Writing the Markup
The home page consists of two forms, so let's start with the simpler of the two to get the basics in place.
The “join a room” form has a headline, a short blurb of copy, an input with a label, and a submit button. Add the
following markup to index.html, in between the <header> and <footer> tags, to create this form:
<section>
<form id="attending">
<h2>Attending?</h2>
<p>Join a room using its ID.</p>
<label>
What is the room's ID?
<input type="text" name="room_id" />
</label>
<input type="submit" value="Join This Room" />
</form><!--/#attending-->
</section>