html5表单设计_HTML5软件

HTML干货分享|HTML5：表单　　HTML5干货分享由睿峰的web讲师李鸿耀老师原创　　表单简介　　表单标签对‘<form>’是一个“块级素”。表单标签的内容通常是“表单素”+“提交按钮”的形式。它虽然和‘<div>’标签一样属于“块级素”，但它却有自己的实际用处，也就是若不将“表单素”放置于表单标签‘<form>’中，那某些表单素将会失效，如：“提交”按钮和“重置”按钮。　　表单属性　　name：规定表单的名称　　action：规定当提交表单时向何处发送表单数据，它的属性值应该是一个“URL” 　　method：规定用于发送 form-data 的 HTTP 方法，值为：get/post 　　target：规定在何处打开“action”中设定的URL。有以下值（_blank、_self、_parent、_top、frame的name）　　enctype：规定在发送到服务器之前应该如何对表单数据进行编码，有以下值：　　application/x-www-form-urlencoded（默认，在发送前编码所有字符）；　　multipart/form-data（不对字符编码，在使用包含文件上传控件的表单时，必须使用该值；　　text/plain（空格转换为 “+” 加号，但不对特殊字符编码）；　　autocomplete：规定是否启用表单的自动完成功能，有以下值：on/off 　　novalidate：如果使用该属性，则提交表单时不进行html5自带的验证。　　‘label’标签　　表单中用于显示表单字段的标签，可以让用户知道该行表单素的作用，它属于“行级素”。和‘<span>’标签不一样，它配合后面学习的其它表单素可以实现一些作用上的关联。所以，标准的表单编写都需要在表单素前加上一对‘<label>’标签，内容需写上标签后表单素的作用。　　

　　呈现效果如下：

　　‘textarea’标签　　‘<textarea>’标签是一个可以输入多行文本的标签对，它同样是一个“行内块级标签”。　　textarea 标签常用属性　　cols：设置行数　　rows：设置列数　　placeholder：设置占位符　　代码示例

　　呈现效果：　　

‘select’标签　　通过‘<select>’标签可以创建单选和多选的下拉菜单。可以通过“size”属性设置该标签在一个选项菜单中可见的选项个数，当它的值设为“1”时，将显示为默认的‘<select>’下拉菜单的样式，‘<option>’是它必须的子菜单，否则将不能提供任何可选项，而‘<option>’标签通常需要具有一个“value”属性，以便于在做数据操作时能准确地通过该属性值取到对应标签的内容。　　‘select’标签常用属性　　autofocus：规定在页面加载后文本区域自动获得焦点。　　disabled：规定禁用该下拉列表。　　multiple：规定可以选择多个选项。　　name：规定下拉列表的名称。　　required：规定文本域是必填的。　　代码示例

‘selected’属性　　如果想要默认选中某一项，则为‘option’标签添加‘selected’属性即可。　　‘select’分组　　分组下拉菜单，将‘optgroup’标签嵌套在‘select’标签中，并为其指定‘label’属性设置组标题，再将‘option’标签嵌套在‘optgroup’标签中即可，如下所示：　　

　　提示：size 属性可以指定显示的列表个数，当显示个数小于实际菜单项时以滚动显示呈现；　　‘dataList’标签　　‘<datalist>’需要配合一个属性为“list”的‘<input>’标签使用，通过将list的属性值设置为‘<datalist>’标签的“ID”属性的值来实现关联，实现出一个既可输入，又可选择的下拉菜单。当然，IE浏览器不支持该素。　　代码示例：

　　‘button’标签　　‘button’标签对和其它表单素一样，同是属于“行内块素”。　　‘button’标签常用属性　　type：指定按钮类型，其值包括：button（普通按钮）/submit（提交按钮）/reset（重置按钮）　　代码示例

　　效果呈现

　　‘output’ 标签　　‘for’ 属性关联‘input’的‘id’属性值，如果有多个则以空格隔开；　　为‘form’标签添加‘oninput’属性，根据公式拼接出输出内容；　　如果需要转换为数字，则使用‘parseInt()’进行转换；　　代码示例：

　　‘input’标签　　‘input’标签是一个没有内容的标签，按照布局类型它属于“行内块级素”，它是通过设置属性及属性值来决定它的显示类型的　　‘input’标签常用属性　　type：指定input类型　　autocomplete：设置是否自动完成，其值为：on/off 　　autofocus：规定输入字段在页面加载时是否获得焦点，不适用于type= ‘hidden’ 　　checked：默认选择，对type值为‘checkbox’及‘radio’有效　　disabled：禁用　　size：设置输入字段的宽度　　maxlength：设置输入字段的最大长度　　width：设置宽度，（适用于 type=‘image’）　　height：设置高度，（适用于 type=‘image’）　　step：设置输入字段合法数字间隔　　required：表示输入字段为必需　　readonly：表示只读　　placeholder：设置输入框的占位符　　pattern：规定输入字段的值的模式或格式。例如 pattern=‘[0-9]’表示输入值必须是 0 与 9 之间的数字。　　multiple：如果使用该属性，则允许一个以上的值，适用于‘select’及‘datalist’ 　　min：设置输入字段的最小值　　max：这是输入字段的最大值　　list：引用包含输入字段的预定义选项的 datalist 。　　value：设置input的值　　‘type’属性值　　text：普通输入框　　password：密码输入框　　radio：单选宽　　checkbox：多选框　　file：文件　　button：普通按钮　　submit：提交按钮　　reset：重置按钮　　image：图片按钮　　hidden：隐藏域　　email：邮箱输入框　　url：资源地址　　search：搜索框　　number：数值输入控件　　tel：电话号码　　range：数值选择范围控件　　date：日期选择控件　　month：月份选择控件　　week：周选择控件　　time：时间选择控件　　datetime：日期时间选择控件　　datetime-local：本地日期时间选择控件　　color：颜色选择控件　　对表单素编组　　对于一些复杂的表单，有时需要将一些素组织在一起，为此可以使用‘fieldset’素。在每一个‘fieldset’素中添加一个‘legend’素即可添加表单相关说明，‘legend’素必须是fieldset素的第一个子素，用法类似于‘details’素与‘summary’素的关系。　　代码示例：　　

　　显示效果：　　

　　原文链接：https://blog.csdn.net/Hierarch_Lee/article/details/

html5表单设计_HTML5软件

相关推荐