dev html

一些关于HTML的基础知识（四）

表单元素

<button> 严格意义上来讲是表单元素，在<form>当中使用，<button>可以通过form属性关联一个表单，任意的表单，如果不使用form属性关联，那么<button>会自动关联到最近的祖先表单当中；formaction、formenctype、formmethod、formnovalidate、formtarget可以重写其所关联表单的相关属性；

<button>可以使用type属性，有三个可选值，button、reset、submit。

<button>可以通过name、value来产生form提交的数据，如果点击此按钮来触发提交，那么按钮本身的name、value会作为提交数据传递到后台服务。

<datalist> 可以创造一个下来列表关联到input，在输入的时候作为字典补全项目展示；

1
2
3
4
5
6
7
8
9
10
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

<fieldset> 用于产生字段组，用于表单内数据的分类。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster">
    <label for="kraken">Kraken</label><br/>

    <input type="radio" id="sasquatch" name="monster">
    <label for="sasquatch">Sasquatch</label><br/>

    <input type="radio" id="mothman" name="monster">
    <label for="mothman">Mothman</label>
  </fieldset>
</form>
Choose your favorite monster 
<input type="radio" id="kraken" name="monster">
<label for="kraken">Kraken</label><br/>

<input type="radio" id="sasquatch" name="monster">
<label for="sasquatch">Sasquatch</label><br/>

<input type="radio" id="mothman" name="monster">
<label for="mothman">Mothman</label>

<form> 是表单的容器，可以使用:valid and :invalid伪类来设置两种状态的表单的样式；可以通过enctype来设置表单提交数据的请求头，默认是application/x-www-form-urlencoded，如果表单中包含文件，可以设置为multipart/form-data。

<input> 支持多种type属性配置，button/checkbox/color/date/datetime-local/email/file/hidden/image/month/number/password/radio/range/reset/search/submit/tel/text/time/url/week

属性名称 适用类型 描述
accept file Hint for expected file type in file upload controls
alt image alt attribute for the image type. Required for accessibility
autocomplete all Hint for form autofill feature
autofocus all Automatically focus the form control when the page is loaded
capture file Media capture input method in file upload controls
checked radio, checkbox Whether the command or control is checked
dirname text, search Name of form field to use for sending the element’s directionality in form submission
disabled all Whether the form control is disabled
form all Associates the control with a form element
formaction image, submit URL to use for form submission
formenctype image, submit Form data set encoding type to use for form submission
formmethod image, submit HTTP method to use for form submission
formnovalidate image, submit Bypass form control validation for form submission
formtarget image, submit Browsing context for form submission
height image Same as height attribute for <img>; vertical dimension
list almost all Value of the id attribute of the <datalist> of autocomplete options
max numeric types Maximum value
maxlength password, search, tel, text, url Maximum length (number of characters) of value
min numeric types Minimum value
minlength password, search, tel, text, url Minimum length (number of characters) of value
multiple email, file Boolean. Whether to allow multiple values
name all Name of the form control. Submitted with the form as part of a name/value pair.
pattern password, text, tel Pattern the value must match to be valid
placeholder password, search, tel, text, url Text that appears in the form control when it has no value set
readonly almost all Boolean. The value is not editable
required almost all Boolean. A value is required or must be check for the form to be submittable
size email, password, tel, text, url Size of the control
src image Same as src attribute for <img>; address of image resource
step numeric types Incremental values that are valid.
type all Type of form control
value all The initial value of the control.
width image Same as width attribute for <img>

<textarea> 多行输入文本；可以通过wrap属性来配置文本换行，配置为hard时自动加入CR+LF来换行，配置为soft根据用户输入来换行。textarea默认都可以缩放，可以通过样式resize: none;来关闭缩放。

<select> 可以通过multiple来配置多选，当启用multiple时还可以通过size来展示多个条目。可以配合使用<optgroup>来为选项分组。

<progress> 进度条，通过max设置100%的数值，通过value设置进度条所在的位置。

<output> 可以计算多个input的和并且显示。

<meter> 通过指定最大值max和最小值min，来决定显示value的值所在的位置。