Mars_Loo
Mars_Loo

39.超文本标记语言HTML详解（下）

文章目录

  • 表单
      • input###
        • label
        • datalist
      • textarea
      • select
        • optgroup
        • option
    • fieldset
      • legend
    • button
    • 表单输出
  • HTML框架
  • HTML颜色
  • HTML脚本
  • HTML字符实体
  • HTML与CSS样式

转载请注明原始出处：http://blog.csdn.net/a464057216/article/details/52332548

后续此博客不再更新，欢迎大家搜索关注微信公众号“测开之美”，测试开发工程师技术修炼小站，持续学习持续进步。

表单

：定义一个表单，属性值列表：

  • action：表单提交地址。
  • enctype：表单编码格式，有3种：
  • application/x-www-form-urlencoded：enctype的默认值，空格转换成+号，特殊字符转换成ASCII HEX编码。
  • multipart/form-data：不对特殊字符编码，上传文件时，必须用此格式。
  • text/plain：空格转换成+号，但是不对特殊字符编码。
  • method：表单提交方式（post/get）。
  • autocomplete：是否开启自动完成（on/off）。
  • novalidate：不对表单进行验证，比如：
    39.超文本标记语言HTML详解（下）_第1张图片
    这样表单不会对email这种input做验证。
  • target：在什么位置提交表单，即在什么位置显示表单提交后的结果，与标签的target属性一样。

##表单输入元素 ##

input###

标签是最基本的form表单的输入元素，属性列表如下：

  • type：输入的类型：
  • button：点击按钮，与javascript配合使用。
  • checkbox：复选框，checked="checked"表示预选该框，配合name和value属性使用。
  • color：拾色器，后台接收到的是#RRGGBB值：
    39.超文本标记语言HTML详解（下）_第2张图片
  • date：日期选择器，后台接收到的是YYYY-MM-DD值：
    39.超文本标记语言HTML详解（下）_第3张图片
  • datetime-local：日期时间选择器，后台接受的是YYYY-MM-DDTHH:mm值：
    39.超文本标记语言HTML详解（下）_第4张图片
  • email：邮箱，有邮箱格式判断，但是没有判断空字符串（Chrome浏览器），移动设备会根据此类型变化输入法键盘格式。
  • file：文件，有“浏览”按钮供选择文件。
  • hidden：隐藏值，配合name、value、Javascript使用。
  • image：将图片作为提交按钮，同时浏览器还会上传用户点击图片的坐标点，以x、y表示。
  • month：月选择器，后台接收到的是YYYY-MM值（虽然客户端可以选择到天）。
  • number：数字选择器，配合min、max、step、value可以规定最小值、最大值、步长、默认值。
  • password：密码。
  • radio：单选按钮，checked="checked"表示预选该按钮，配合name和value属性使用。
  • range：不精确数字输入，配合min、max规定最小值、最大值：
    这里写图片描述
  • reset：重置按钮，充值表单为默认值。
  • search：搜索字段，外表看起来与text没有什么不同。
  • submit：提交按钮，可以不提供value属性。
  • tel：电话号码字段，没有格式检查。
  • text：单行文本字段。
  • time：时间选择器，后台接受HH:mm（小时：分钟)值。
  • url：URL，有基本的格式检查，同样没有判空（Chrome)。
  • week：年和周选择器，后台接受YYYY-WMM值，比如2016-W08表示2016年8月。
    39.超文本标记语言HTML详解（下）_第5张图片
  • accept：仅用于type="file"时，表示接受的文件类型（如果有多个，使用逗号分隔），如：
  • audio/*：声音文件。
  • vedio/*：视频文件。
  • image/*：图片文件。
  • 其他MIME_TYPE：参考这里。
  • alt：仅用于type="image"时，用于图片无法加载的替换文字。图片无法加载时，也会上传鼠标点击处在图片占位符中的偏移量的x、y值。
  • autocomplete：同
    标签的autocomplete属性。
  • autofocus：该元素自动获得焦点，如autofocus="autofocus"。
  • checked：见的type属性为checkbox和radio的标签，预选该多选框或单选按钮。
  • disabled：禁用该元素，不适用于type="hidden"的元素。
  • form：设置元素所属的form的id（如果有多个，用空格分隔），表示该输入内容属于哪个表单，适用于元素不在元素中的情形。
  • formaction：功能等同与标签中的action属性，但是配合类型为submit或image的标签可以实现更精细化的控制。
  • formnovalidate：在type="submit"的标签中设置，表示采用不验证提交（会覆盖元素的 novalidate 属性），比如。
  • formtarget：表单在什么位置提交（会覆盖元素的target属性），功能类似元素的target属性。
  • height：只适合type="image"的元素，用来规定图片的高度。
  • list：引用元素的id，用于输入有预设值的列表，如：
    39.超文本标记语言HTML详解（下）_第6张图片
    效果如下：
    39.超文本标记语言HTML详解（下）_第7张图片
  • max：定义元素可以输入的最大值，可以配合type为如下值的元素工作：number、range、date、datetime、datetime-local、month、time 和 week。
  • maxlength：定义元素可以输入的最多字符个数。
  • min：同max属性，但是定义了最小值。
  • multiple：表示元素可以输入多个值，可以配合type为file或email的元素使用：
    39.超文本标记语言HTML详解（下）_第8张图片
    在浏览器中可以输入用逗号分隔的多个email地址：
    这里写图片描述
    后台服务器收到的内容为整个字符串，要获取每个email地址需要自己分隔。
    这里写图片描述
    在浏览器可以上传多个文件：
    这里写图片描述
    后台服务器接收方法为（Flask）：request.files.getlist('pro')
  • name：设置元素的名称，服务器获取数据需要使用根据这个名字。
  • pattern：设置元素接受的输入格式，适用于type为text、search、url、tel、email 和 password的元素，配合全局title属性为用户提供格式解释：
    这里写图片描述
    效果如下：
    39.超文本标记语言HTML详解（下）_第9张图片
  • placeholder：为输入项提供简短的说明，适用于type为text、search、url、tel、email 和 password的元素。
  • readonly：属性值是只读的，需要配合value属性提供预设值，也可以配合Javascript实现更精细的控制。
  • required：该元素是必填项，适合type值为text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file的元素。
  • size：元素的可见宽度，适合type值为如下的元素：text、search、tel、url、email 和 password。
  • src：适合type="image"的元素，定义图片的来源。
  • step：定义元素的取值的步长，适合type值为如下的元素：number、range、date、datetime、datetime-local、month、time 和 week。一般需要配合min和max属性使用。
  • value：定义元素的值，对于不同类型的元素含义不同：
  • 对于 button、reset、submit 类型 - 定义按钮上的文本。
  • 对于 text、password、hidden类型 - 定义输入字段的初始（默认）值。
  • 对于 checkbox、radio、image类型 - 定义与元素相关的值，当提交表单时该值会发送到表单的 action URL。
  • width：适合type="image"的元素，用来规定图片的宽度。
label

label标签用来为元素添加说明，没有特殊视觉效果，不过如果在label元素内点击文本，与选择label标签绑定的元素效果一样，提高了鼠标用户的可用性。属性如下：

  • for：与那个元素绑定，设置为被绑定元素的id。
  • form：元素属于哪个元素，同样设置为form的id，多个id之间用空格分隔。
datalist

datalist元素为标签提供有预选值的列表，有提示功能，也可以输入不是预选值的值，参考元素type="list"属性的说明。

textarea

textarea是多行文本输入标签，默认可以输入无限字符，属性列表：

  • autofocus：文本框在页面载入时自动获取焦点。
  • cols：文本框的列数（以字符为单位）。
  • disabled：文本框被禁用。
  • form：文本框属于哪个的id，多个id用空格分隔。
  • maxlength：文本框允许输入的最多字符个数。
  • name：文本框名称。
  • placeholder：简短说明。
  • readonly：文本框只读。
  • required：文本框是必填项。
  • rows：文本框行数。
  • wrap：定义了cols属性时，如果一行文字超出了cols定义的宽度，提交的文本是否包含换行，取值为soft（不包括）或hard（包括）。

select

提供预选值的下拉列表，属性列表如下：

  • autofocus：下拉列表在页面载入时自动获取焦点。
  • disabled：下拉列表被禁用。
  • form：下拉列表属于哪个的id，多个id用空格分隔。
  • multiple：下拉列表可以多选。实际使用中，Windows用户需要按住Ctrl进行多选，Mac用户需要按住Command进行多选，这需要提示给用户，所以这种情况下直接用多选框更好。
  • name：下拉列表名称。
  • required：提交表单前必须在下拉列表中选择一项。
  • size：下拉列表的可见项数，默认值是1。如果size的值小于元素的数量，自动会出现滚动条。
optgroup

optgroup元素将相关的选项元素分组，属性列表如下：

  • disabled：选项组被禁用。
  • label：为选项组添加描述
option

option元素定义