- HTML5 Web Application Development By Example Beginner's Guide
- J.M. Gustafson
- 332字
- 2021-08-13 16:50:26
Time for action – adding task details
We will give each task the following new fields:
- Start date: The date the task should start. The input type is
date. - Due date: The date the task should be done by. The input type is
date. - Status: Drop-down list
<select>with options for None, Not Started, Started, and Completed. - Priority: Drop-down list
<select>with options for None, Low, Normal, and High. - % Complete: The input type is
number, with a valid range from 0 to 100.
Let's define these fields in the task template markup in taskAtHand.html. The details for each task will be displayed in a section under the task name. Our template now looks like the following code snippet:
<li class="task">
<span class="task-name"></span>
<input type="text" class="task-name hidden"/>
<div class="tools">
<button class="delete" title="Delete">X</button>
<button class="move-up" title="Up">^</button>
<button class="move-down" title="Down">v</button>
</div>
<div class="details">
<label>Start date:</label>
<input type="date"/><br/>
<label>Due date:</label>
<input type="date"/><br/>
<label>Status:</label>
<select>
<option value="0">None</option>
<option value="1">Not Started</option>
<option value="2">Started</option>
<option value="3">Completed</option>
</select><br/>
<label>Priority:</label>
<select>
<option value="0">None</option>
<option value="1">Low</option>
<option value="2">Normal</option>
<option value="3">High</option>
</select><br/>
<label>% Complete:</label>
<input type="number min="0" max="100" step="10" value="0"/>
</div>
</li>
First we added a new <div class="details"> element to contain the new detail fields. This allows us to separate the details from the task name to style it differently. Then we added the labels and fields to it. Note that for % Complete we set the min and max attributes of the number field to limit the number between 0 and 100.
Next we need to style the details section. We will give it a gray background and rounded corners. We make all the labels of same width and align them to right so that all the input fields line up. We then set the <select> element of Status and Priority to a fixed width so they line up as well.
#task-list .task .details
{
display: block;
background-color: gray;
color: white;
border-radius: 4px;
margin-top: 0.5em;
padding: 0.25em;
overflow: auto;
}
#task-list .task .details label
{
width: 8em;
text-align: right;
display: inline-block;
vertical-align: top;
font-size: 0.8em;
}
#task-list .task .details select
{
width: 8em;
}
What just happened?
We added a task details section to our tasks using some of the new HTML5 input types. The following screenshot shows what the task item looks like now with a details section:
