1.表单元素
HTML 表单用于收集用户输入。
代码示例:
常用属性解释:
action属性定义在提交表单时执行的动作通常,表单会被提交到 web 服务器上的网页。在上面的例子中,指定了某个服务器脚本来处理被提交表单.
method属性规定在提交表单时所用的 HTTP 方法(GET 或 POST)
2.输入input
2.1 文本输入框
创建一个最简单的文本输入框:
代码示例:
实际效果图:
我们可以在这个文本框里面输入任意的数字、字符或符号
(1)创建一个带有提示文字的文本输入框:
代码示例:
placeholder 属性规定用以描述输入字段预期值的提示,该提示会在用户输入值之前显示在输入字段中。
placeholder 属性适用于以下输入类型:text、search、url、tel、email 以及 password。
实际效果图:
(2)创建一个带有默认值的文本输入框:
代码示例:
value 属性规定输入字段的初始值。
实际效果图:
(3)创建一个带有默认值且不能修改的文本输入框:
代码示例:
readonly 属性规定输入字段为只读(不能修改),readonly 属性不需要值。它等同于 readonly="readonly"。
(4)创建一个禁用的文本输入框:
实际效果图:
disabled 属性规定输入字段是禁用的。被禁用的元素是不可用和不可点击的。被禁用的元素不会被提交。disabled 属性不需要值。它等同于 disabled="disabled"。
(5)创建限制输入字数的文本输入框:
代码示例:
maxlength 属性规定输入字段允许的最大长度,如设置 maxlength 属性,则输入控件不会接受超过所允许数的字符。
如上代码:我们输入超过8个文字后,再输入任意的文字,文本输入框都不会接收。
2.2密码输入框
创建一个密码输入框,代码示例:
实际页面效果:
密码输入框的本质还是一个文本输入框,只不过密码输入框在用户输入字段时,会自动的将输入的文字用星号或实心圆替换,避免用户密码直接被其他人看到。
备注:适用在文本输入框上的属性同样也适用于密码输入框。
2.3单选按钮
单选输入或单选按钮,通常用与用户从多个选项中选择一个。
代码示例:
请选择您的性别:
男
女
实际效果图:
注意事项:
同一组选项name属性要保持一致
选定的选项在表单数据提交时提交的格式为 nameVlaue:'selectVlaue',如上代码表单提交时提交的值:sex:male
2.3.1创建一个默认选中的单选按钮
代码示例:
请选择您的性别:
男
女
checked 属性规定按钮是否默认选中状态。checked 属性不需要值。它等同于 checked="checked"。
2.4多选按钮
多选按钮,用户可以从多个选项中选择一个或多个
I have a pen
I have an apple
实际效果图:
多选按钮也可以通过checked属性设置多选按钮为默认选中状态,多选的情况下表单提交时,多选按钮提交的值是用英文的逗号隔开的,例如如上表单在提交时, vehicle=pen&vehicle=apple
2.5.按钮 Button
html中,按钮通常分为普通按钮、提交按钮、重置按钮,其中提交和重置按钮用于表单数据的提交和清空重置,一般放在form表单里面,普通按钮可以随意。
(1)普通按钮
代码示例:
实际页面效果:
value属性可以设置按钮上显示的文字。按钮可以可以通过disabled属性来设置是否禁用。
(2)提交按钮
表单提交按钮通常位于form表单内,点击后,会将用户输入的数据提交到指定的地址去处理
代码示例:
实际效果图:
备注:
上述代码使用的是get方式提交的输入
get方式提交数据时会在提交的目标URL地址后紧跟数据字段
value、disabled属性也适用于submit按钮
(3)重置按钮
重置(清空)按钮通常用于用户输入表单数据后一键清空。也需要放在form表单内使用
代码示例:
备注:value、disabled属性也适用于reset按钮
3.文本域
文本输入框在用于字数不多的文本输入时没有什么问题,但是当用户需要输入多行、多字数文本时,文本输入框就会显得很不友好。因此多行文本的输入,我们应该考虑使用文本域。
代码示例:
实际页面效果:
文本域可容纳无限数量的文本,但默认的文本域视觉大小比较小,可以通过文本域右下角的“小三角”拖动来调节大小。也可以通过cols和rows属性来设置文本域的尺寸,但是cols属性设置不太标准,最好的方法是通过CSS设置。
3.1设置里默认大小的文本域
实际页面效果:
rows属性用于设置文本域可见文本的行数。
cols属性用于设置文本域可见区域每行文字的个数,但是这个数量因为中英文差异不太标准。
此外,placeholder name maxlength disabled属性也适用于文本域。
4.下拉列表
下拉列表和无序列表类似,都是一种组合类型的标签,通常用于省市区的选择。
代码示例:
所在城市:
南京
杭州
上海
合肥
实际页面效果:
4.2默认选中某一项
默认的下拉列表选中的是第一项,如果需要指定其他选项,可以通过selected属性设置.
代码示例:
所在城市:
南京
杭州
上海
合肥
实际页面效果: