HTML and CSS Reference
In-Depth Information
Building an interactive form
The input form is divided into four sections, each represented with a
div
element. Open the
default.
html
file in Visual Studio and make sure the
body
element contains the following markup:
<body>
<div data-win-control="WinJS.UI.HtmlControl"
data-win-options="{uri:'/pages/header.html'}"></div>
<h1>TO-DO List</h1>
<div class="form-container">
<div class="form-section"> ... </div>
<div class="form-section"> ... </div>
<div class="form-section"> ... </div>
<div class="form-section"> ... </div>
</div>
<div data-win-control="WinJS.UI.HtmlControl"
data-win-options="{uri:'/pages/footer.html'}"></div>
</body>
The
div
block with a CSS class name of
form-container
is just the block of markup you'll be writing
in the rest of the chapter. In the
default.css
file, add the following code to style the container
div
elements:
.form-container {
border-radius: 10px;
background-color: #99e;
color: #eee;
padding: 20px;
margin: 5px;
width: 600px;
}
.form-section {
margin-top: 10px;
}
.block-element {
display: inline-block;
vertical-align: top;
}
In the topmost
div
, you place controls to capture the description of the task and the due date. The
second
div
indicates the priority of the task, and the third allows the user to set the task status. Finally,
the fourth
div
contains a button to save the task.
Search WWH ::
Custom Search