HTML and CSS Reference
In-Depth Information
to
multipart/form-data
so that binary data can be sent. Next, a
progress
ele-
ment is added and incremented over the one that appeared on the first form:
<form
action="complete.php"
method="post"
enc-
type="multipart/form-data">
<p>Progress:
<progress
value="1"
max="2">2/
3</progress></p>
</form>
Next, a fieldset and legend is created for the tip details area. A date/time input field
is added for the local date and time of the news incident. A
textarea
element is used
for gathering the tip details, and a file input is used for allowing a supporting file to be
attached, if necessary:
…
<fieldset>
<legend>Enter Tip Details</legend>
<p><label>Date/Time
of
incident:
<input
type="datetime-local" /></label></p>
<p><label>Tip
details:
<tex-
tarea></textarea></label></p>
<p><label>Attach supporting file: <input type="file"
/></label></p>
…
Next, a range input type is added as an “importance” slider for the tip. The fieldset
is then closed. Next to the slider is a read-only text input field that includes placeholder
text to indicate that a higher value on the slider means “more urgent”:
…
<p><label>Urgency: <input type="range" name="range"
id="range" min="1" max="10" /><input
id="rvalue" placeholder="more urgent" readonly /></label>
</fieldset>
…
Using JavaScript, we'll make the value in the read-only text input update dynamically
when the slider is moved. We'll set the placeholder text to indicate that a high number
on the slider means “most urgent” and update the text input to the value of the slider
when the slider is moved. The JavaScript is added in a
script
element in the head of
the document:
Search WWH ::
Custom Search