表单区域元素
表单区域使用<form>标签包裹,表单区域中可添加多种表单元素,包括input元素、textarea元素、select元素、button元素和label元素等,需要注意<input>为单标签元素。
<
表单区域元素常用属性:
- action:处理器表单提交的URL,规定提交表单向何处发送表单数据。
- method:浏览器使用这种HTTP方式来提交表单,可能的值有post和get。post指HTTP POST方法,表单数据会包含在表单体内然后发送给服务器。get指HTTP GET方法,表单数据会附加在action属性的URL中,并以'?'作为分隔符。
- target:规定提交表单后在何处打开action URL。可能的值包括:_self(默认值)、_blank、_parent、_top。
<
输入元素
输入元素使用<input>标签包裹,输入元素通过type属性区分不同的输入元素类型,包括text文本输入框、password密码输入框、search搜索框、number数字输入框、radio单选按钮、checkbox复选框、hidden隐藏域(页面不可见、用于保存数据等)、file上传文件、button普通按钮、submit提交按钮、reset重置按钮等。
<
输入元素通用属性除type外还有:
- name:input表单元素的名字。以名字/值的形式随表单一起提交。
- value:表单控件的值。以名字/值对的形式随表单一起提交。
- disabled:该属性为布尔属性,只有属性名,用于表示表单元素是否被禁用。
- autocomplete:用于表单元素的自动填充功能。
- autofocus:当页面加载时自动聚焦到有此属性的表单元素。
另外部分元素包括如下属性:
- placehold:当表单元素为空时,元素中显示的内容。
- readonly:布尔属性,存在时表示控件的值不可编辑。
- required:布尔属性,表示此值为必填项或者提交表单前必须先检查该值
<
多行纯文本编辑元素
多行纯文本编辑元素使用<textarea>标签包裹。
<
多行纯文本编辑元素的属性包括:
- name:用于设置随表单一同提交到服务器的相关数据的名字
- rows和cols:用于声明<textarea>的精确尺寸。
另外还包括与<input>功能相同的属性包括:disabled、autocomplete、autofocus、placehold、readonly、required等。
<
选项列表
选项列表使用<select>标签包裹,可用于创建单选或者多选菜单,其中菜单项使用<option>标签包裹。
<
选项列表元素的属性包括:
- multiple:布尔属性,表示列表中的选项是否支持多选。如没有声明该值时一次只能选中一个选项。
- size:如果控件显示为滚动列表框,则此属性表示为控件中同时可见的行数。
其他属性包括:disabled、autocomplete、autofocus、required等。
菜单项的熟悉包括:
- selected:布尔属性,表明这个菜单项是否一开始就被选中。
- value:这个属性的值表示该选项被选中时提交给表单的值。如果省略此属性,提交值就从选项元素扽文本内容中获取。
- label:这个属性用于表示选项含义的文本,如果label属性没有定义,它的值就是元素文本内容。
- disabled:布尔属性,同样用于表示该选项不可选。
<
标签元素
标签元素使用<label>标签包裹,用来关联表单元素。当点击标签时与之关联的表单元素自动获得焦点。标签元素的使用方式有两种:可以直接包裹表单元素,也可以使用for属性关联到表单元素的id属性。
<
相关链接
<form>语法与相关属性:
formdeveloper.mozilla.org<input>语法与相关属性:
<input>:输入(表单输入)元素developer.mozilla.org<textarea>语法与相关属性:
<textarea>developer.mozilla.org<select>语法与相关属性:
<select>developer.mozilla.org<option>语法与相关属性:
<option>developer.mozilla.org