The Foundation form control is automatically set to the global style:
所有 尝试一下 » Use in a form If you need to set the right alignment of labels, you can use the 尝试一下 » Use 注意 You need to use JavaScript to update the error status entered by the user.
<textarea>
,
<select>
及
<input>
元素宽度都为 100%，且带有外边距、内边距、阴影和鼠标移动效果。 8.23.1. Example ¶
<form>
Input:
<input type="text" placeholder="Name">
Textarea:
<textarea rows="4" placeholder="Address"></textarea>
Select:
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</form>
Label ¶
<label>
Element to set the tag, which can add a for attribute and an id attribute. The user gets the focus of the input box when clicking on the label or input field: 8.23.2. Example ¶
<form>
<label for="name">Input
<input type="text" placeholder="Name" id="name">
</label>
<label for="adr">Label
<textarea rows="4" placeholder="Address" id="adr"></textarea>
</label>
<label for="num">Select
<select id="num">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</label>
</form>
.right
Class: 8.23.3. Example ¶
<label class="right">
8.23.4. Fieldset ¶
Foundation 渲染 ``<fieldset>`` 元素的样式如下：
8.23.5. Example ¶
<form>
<fieldset>
<legend>Fieldset Legend</legend>
<label>Name
<input type="text" placeholder="First Name..">
</label>
<label>Email
<input type="text" placeholder="Enter email..">
</label>
</fieldset>
</form>
Error statu ¶
.error
Class to set the wrong label, input box, and text box style 8.23.6. Example ¶
<form>
<label class="error">Error
<input type="text" placeholder="Name..">
</label>
<small class="error">Wrong input</small>
<textarea rows="4" placeholder="Address"></textarea>
<small class="error">Wrong input</small>
</form>