将复选框包装在label
标签内:
<label><input type="checkbox" name="checkbox" value="value">Text</label>
for
属性使用for
属性(与复选框id
匹配):
<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Text</label>
<fieldset>
<legend>What metasyntactic variables do you like?</legend>
<input type="checkbox" name="foo" value="bar" id="foo_bar">
<label for="foo_bar">Bar</label>
<input type="checkbox" name="foo" value="baz" id="foo_baz">
<label for="foo_baz">Baz</label>
</fieldset>
<input type="checkbox" value="My checkbox label value" />
<style>
[type=checkbox]:after {
content: attr(value);
margin: -3px 15px;
vertical-align: top;
white-space:nowrap;
display: inline-block;
}
</style>
<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />
<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />
<form>
<label for="male"><input type="checkbox" name="male" id="male" />Male</label><br />
<label for="female"><input type="checkbox" name="female" id="female" />Female</label>
</form>
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />
使用label
元素和for
属性将其与复选框关联:
<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />
在带有复选框的角材料标签中
<mat-checkbox>Check me!</mat-checkbox>