Form inputs (other)
Allows the user to specify inputs when generating an instance of the report. For example, checkboxes and drop-down fields.
Code & Variants
While these code examples omit it for the sake of brevity, all <label> and <input> tags must always be nested in a <form> tag. Pay careful attention to the relationships of the for and id attributes.
Number Input
A scale of numbers defined by the max and min attributes, as well as the interval between using the step attribute.
<label for="field-number">Number Input</label>
<input type="number" id="field-number" name="field-number" step="1" max="20" min="-20">
Number Input Demo
Datetime Local Input
An input that gives the user the option to select a date and time. This is the most specific option for submitting a date and time and should only be used if both values are genuinely needed.
<label for="field-datetime-local">Datetime Local Input</label>
<input type="datetime-local" id="field-datetime-local" name="field-datetime-local">
Datetime Local Input Demo
Date Input
An input that gives the user the option to select a date (Day, Month, and Year).
<label for="field-date">Date Input</label>
<input type="date" id="field-date" name="field-date">
Date Input Demo
Month Input
An input that gives the user the option to select a month and year.
<label for="field-month">Month Input</label>
<input type="month" id="field-month" name="field-month">
Month Input Demo
Week Input
An input that gives the user the option to select a week of a year.
<label for="field-week">Week Input</label>
<input type="week" id="field-week" name="field-week">
Week Input Demo
Time Input
An input that gives the user the option to select a time of the day. (Hours, Minutes, Seconds)
<label for="field-time">Time Input</label>
<input type="time" id="field-time" name="field-time">
Time Input Demo
Range Input
An input that let's users specify a range of numbers with an upper and lower bound.
<label for="field-range">Range Input</label>
<input type="range" id="field-range" name="field-range" min="0" max="100" value="70" step="10">
Range Input Demo
File Input
An input that allows users to upload a file.
<label for="field-file">File Input</label>
<input type="file" id="field-file" name="field-file" accept="image/png, image/jpeg">
File Input Demo
Color Input
An input that allows users to select a color.
<label for="field-color">Color Input</label>
<input type="color" id="field-color" name="field-color" value="#b31b1b">