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:
<div data-win-control="WinJS.UI.HtmlControl"
<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 data-win-control="WinJS.UI.HtmlControl"
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
.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