表单控件
标准里,表单from下的控件有以下:
-label:一个字段标签,包裹input时,点击字段也可以将焦点集中在输入框
-output:
-input:收集用户的输入信息
-object:
-fieldest:把控件集合起来
-meter:
-select:做一些菜单项的选择
-progress:进度条
-textarea:多行文本
-img:图片文本
-button:按钮
form
表单关联控件的集合,而且,禁止嵌套;
label
表单控件的一个标题:<div><label>姓名:<input></label></div>,input写在label里可以将label和输入框关联起来,关联起来后,点击标题也可以将焦点激活,除了上面这种关联,还可以是
<div><label for="custname">姓名</label><input name="custname" id="custname"></div>
可关联的元素有:button,input,meter,output,progress,select,textarea
select
列表选择器,主要用作选择菜单,默认是一个单选
<select>
<option value="1">菜式1</option>
<option value="2">菜式2</option>
<option value="3">菜式3</option>
<option value="4">菜式4</option>
<option value="5">菜式5</option>
</select>
如果要开启多选
<select multiple>
<option value="1">菜式1</option>
<option value="2">菜式2</option>
<option value="3">菜式3</option>
<option value="4">菜式4</option>
<option value="5">菜式5</option>
</select>
如果在单选或多选的情况下,要显示更多项(默认四项),加一个size,<select multiple size="5"></select>
另外可以使用<optgroup>做分组
<select >
<optgroup label="1">
<option >菜式1</option>
<option>菜式2</option>
</optgroup>
<optgroup label="2">
<option>菜式3</option>
<option>菜式4</option>
</optgroup>
<optgroup label="3">
<option>菜式5</option>
</optgroup>
</select>
可以通过disable做禁用
<select >
<optgroup label="1" disabled>
<option >菜式1</option>
<option>菜式2</option>
</optgroup>
<optgroup label="2">
<option disabled>菜式3</option>
<option>菜式4</option>
</optgroup>
<optgroup label="3">
<option>菜式5</option>
</optgroup>
</select>
datalist
为表单控件预定义的选项集合,如果仅仅是默认状态下,是为不可见的,只有当关联起来之后,可以造成如:激活输入框,显示datalist之间的内容
<div><label>数据:<input type="text" list="list"></label></div>
<div>
<datalist id="list">
<option>1</option>
<option>2</option>
</datalist>
</div>
option
选项,可以嵌入在select,datalist,optgroup元素里
<option label="2" value="asd" disabled selected>1</option>
textarea
多行文本输入框
progress
任务进度信息控件
<progress value="50" max="100"></progress>
当有确定的进度的时候,比如,到100结束,可以设置value和max,效果是,到100后停止
当不确定进度的时候,可以只设置max,这样的效果就是一段小进度来回滚动
meter
度量信息控件,比如展示磁盘空间
<meter value="50" min="0" low="60" high="85" max="100" optimum="9"></meter>
value:当前数值,没有指定,或者超过,低于设定的值,会显示一个最接近该设定的值
min:值的最小边界,比max小
low:低值上限
high:高值的上限
max:值的最大边界,比min大
optimum:最佳取值指示
fieldset
分组表单控件
<fieldset>
<legend>披萨配料</legend>
<label><input type="checkbox" name="topping" value="bacon" required>熏肉</label>
<label><input type="checkbox" name="topping" value="cheese">奶酪</label>
<label><input type="checkbox" name="topping" value="onion">洋葱</label>
<label><input type="checkbox" name="topping" value="mushroom">蘑菇</label>
</fieldset>
button
按钮,触发某些行为,类型通过type设置
按钮行为:
-reset:重置,点了之后重置所有内容
-submit:提交表单
-button:不做任何事情