3 form Form
These are the default form styles applied to HTML elements.
Source:
styles.scss
, line 23
3.1 form.common Forms
Base form elements.
Example
Markup: base\form_html.twig
<fieldset>
<legend>Legend</legend>
<p>
Wafer biscuit chupa chups donut. Cheesecake dragée macaroon. Bear claw candy
canes jelly cake tootsie roll chocolate caramels candy. Chocolate bar toffee
candy canes caramels cookie soufflé. Danish powder pie bonbon pastry carrot
cake candy. Candy fruitcake jelly-o sweet roll gingerbread toffee chupa
chups.
</p>
</fieldset>
<form>
<p><label for="text_field">Text Field:</label>
<input type="text" id="text_field">
</p>
<p><label for="text_field_disabled">Disabled Text Field:</label>
<input type="text" id="text_field_disabled" disabled="" value="I'm disabled">
</p>
<p><label for="text_field_readonly">Readonly Text Field:</label>
<input type="text" id="text_field_readonly" readonly="" value="I'm readonly">
</p>
<p><label for="text_area">Text Area:</label>
<textarea id="text_area" style="margin: 0px; width: 357px; height: 69px;"></textarea>
</p>
<p><label for="text_area_disabled">Disabled Text Area:</label>
<textarea id="text_area_disabled" disabled="">I'm disabled</textarea>
</p>
<p><label for="text_area">Readonly Text Area:</label>
<textarea id="text_area" readonly="">I'm readonly</textarea>
</p>
<p><label for="select_element">Select Element:</label>
<select id="select_element">
<optgroup label="Option Group 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</optgroup>
<optgroup label="Option Group 2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3" disabled="">Disabled Option</option>
</optgroup>
</select>
</p>
<p><label for="select_element_disabled">Disabled Select Element:</label>
<select id="select_element_disabled" disabled="">
<option value="1">Unselectable Option</option>
<option value="2">This option should not even be seen</option>
</select>
</p>
<p>Radio Buttons:
<label><input type="radio" class="radio" name="radio_button" value="radio_1">
Radio 1</label>
<label><input type="radio" class="radio" name="radio_button" value="radio_2">
Radio 2</label>
<label><input type="radio" class="radio" name="radio_button" value="radio_3">
Radio 3</label>
<label><input type="radio" class="radio" name="radio_button" value="radio_4" disabled="">
Radio Disabled</label>
</p>
<p>Checkboxes:
<label><input type="checkbox" class="checkbox" name="checkboxes" value="check_1">
Checkbox 1</label>
<label><input type="checkbox" class="checkbox" name="checkboxes" value="check_2">
Checkbox 2</label>
<label><input type="checkbox" class="checkbox" name="checkboxes" value="check_3">
Checkbox 3</label>
<label><input type="checkbox" class="checkbox" name="checkboxes" value="check_4" disabled="">
Checkbox Disabled</label>
</p>
<p><label for="password">Password:</label>
<input type="password" class="password" id="password">
</p>
<p><label for="file">File Input:</label>
<input type="file" class="file" id="file">
</p>
</form>
Source:
base/_form.scss
, line 1
Example
Markup: base\form_html5.twig
<form>
<p><label for="email">Email:</label>
<input type="email" id="email">
</p>
<p><label for="url">URL:</label>
<input type="url" id="url">
</p>
<p><label for="tel">Telephone:</label>
<input type="tel" id="tel">
</p>
<p><label for="number">Number:</label>
<input type="number" id="number" min="0" max="10" step="1" value="5">
</p>
<p><label for="search">Search:</label>
<input type="search" id="search">
</p>
<p><label for="date">Date:</label>
<input type="date" id="date">
</p>
<p><label for="datetime">Datetime:</label>
<input type="datetime" id="datetime">
</p>
<p><label for="datetime-local">Datetime-local:</label>
<input type="datetime-local" id="datetime-local">
</p>
<p><label for="time">Time:</label>
<input type="time" id="time">
</p>
<p><label for="color">Color:</label>
<input type="color" id="color">
</p>
<p><label for="datalist">Datalist:</label>
<input list="browsers" name="browser" type="datalist" id="datalist">
<datalist id="browsers">
<option value="Internet Explorer">
</option>
<option value="Firefox">
</option>
<option value="Chrome">
</option>
<option value="Opera">
</option>
<option value="Safari">
</option>
</datalist>
</p>
<p><label for="range">Range:</label>
<input type="range" id="range" name="points" min="1" max="10">
</p>
<p><label for="output">Output:</label>
<output name="result" id="output">42</output>
</p>
<p><label for="progress">Progress:</label>
<progress id="progress" value="65" max="100"></progress>
</p>
<p><label for="meter">Meter:</label>
<meter id="meter" min="200" max="500" value="350">350 degrees</meter>
</p>
<p>
<button class="button">Button Element</button>
</p>
<p>
<input class="button" type="reset" value="Clear">
</p>
<p>
<input class="button" type="submit" value="Submit">
</p>
</form>
Source:
base/_form.scss
, line 156