Loading... ## 表单 **创建语法** ```html <form action="表单提交地址" method="get/post" name="表单名称" id="表单唯一标识"> </form> ``` * 属性解释 * action : 表单提交地址(当用户填写数据之后,需要将数据提交到哪里页面中进行处理) * method : 表单的提交方式 * get : 用户所输入的信息将会暴露在URL请求地址中 [传输速度快,但是不安全] [一般可以用在搜索引擎,提交不重要的资料的时候可以采用get请求] * post : 用户输入的信息将会不会暴露在URL请求地址中 [传输速度慢,但是很安全] [登录,注册等操作,涉及到用户隐私的,必须使用post提交] ## 表单元素 ### 常规的表单元素的创建语法 ```html <input type="text" id="表单元素唯一标识" name="表单元素名称(不唯一)" value="" placeholder="默认提示语句" size="30" maxlength="" autofocus autocomplete pattern="正则表达式" required> ``` * 属性解释 * type : 表单元素的类型 * text : 文本框 [默认值] * password : 密码框 * checkbox : 复选框 [默认选中: checked / checked="checked"] * radio : 单选按钮 [默认选中: checked / checked="checked"] * button : 普通按钮 * submit : 提交按钮 * reset : 重置按钮 * image : 图片提交按钮 (功能和提交按钮一致) * file : 文件域 * hidden : 隐藏域 * **HTML5 新加的type属性值 [浏览器在进行提交数据时,会进行相对应的格式验证]** * **email : 电子邮件 [会触发浏览器的格式验证]** * **url : 网址 [会触发浏览器的格式验证]** * **number : 数字 [会触发浏览器的格式验证]** * **range : 滑块 [step : 标量]** * **search : 搜索框** * **color : 颜色框** * **tel : 定义用于电话号码的文本字段 [不会触发浏览器的格式验证]** * **Date pickers (date, month, week, time, datetime, datetime-local) : 日历控件 [填写的是小括号里面的值] 对应功能:[日期,月份,周,时间,日期和时间,本地日期和时间]** * id : 表单元素的唯一标识 * name : 表单元素的名称 [当使用type="radio"的时候,name还可以用于元素分组] * size : 表单元素的宽度 [以字符为单位] [只能用在: text / password / email / url / search] * maxlength : 最大的输入字符长度 [以字符为单位] [只能用在: text / password / email / url / search] * value : 表单元素的值 * readonly : 只读 [value值会提交至给服务器] * disabled : 禁用 [value值不会提交至服务器] [当一个元素同时拥有只读和禁用时,禁用有着更高的优先级] * **HTML5 新加的属性** * **autofocus : 自动获得焦点** * **autocomplete : 自动填充 [取值范围: on / off]** * **pattern : 正则表达式** * **required : 必填项,元素不允许留空** * **placeholder : 默认提示** ### 其他常见的表单元素 #### 文本域 语法: ```html <textarea rows="10" cols="" name="表单元素的名称(不唯一)" id="表单元素的唯一标识">内容</textarea> ``` * 属性解释 * rows : 文本域的行 * cols : 文本域的列 * 注意: 在文本域中能够正常解析空格、回车、制表符(tab键) #### 下拉框 语法: ```html <select name="city" id="city"> <option value="cs">长沙市</option> <!-- 一个选择项 "长沙市":显示的值(给用户看的) value="cs":cs就是隐藏的值(给服务器看的)--> <option value="hy">衡阳市</option> <option value="zz" selected="selected">株洲市</option> ... </select> ``` * 属性解释 * selected : 让某一个选项默认选中 #### HTML5新加的其他常见表单元素 datalist : 元素规定输入域的选项列表 ```html <datalist id="search_result"> <option label="**[http://hot-job.cn](http://hot-job.cn/)" value="北大青鸟长沙实力学校" /> <option label="[http://ks-accp.cn](http://ks-accp.cn/)" value="长沙新华电脑培训学校" /> <option label="[http://csust.edu](http://csust.edu/)" value="长沙理工大学继续教育学员" /> </datalist> ``` 案例演示: ```html <form action="" method="get"> 简易搜索框: <input type="text" list="search_result" name="search" /> <datalist id="search_result"> <option label="**[http://hot-job.cn](http://hot-job.cn/)" value="北大青鸟长沙实力学校" /> <option label="[http://ks-accp.cn](http://ks-accp.cn/)" value="长沙新华电脑培训学校" /> <option label="[http://csust.edu](http://csust.edu/)" value="长沙理工大学继续教育学员" /> </datalist> <input type="submit" /> </form> ``` * keygen : 提供一种验证用户的可靠方法 * output : 用于不同类型的输出 * 更多详情查阅: [https://www.w3school.com.cn/html5/html_5_form_elements.asp](https://www.w3school.com.cn/html5/html_5_form_elements.asp) ## HTML5表单验证 * 非空验证 : required  * 格式验证 : 浏览器会更具用户输入的信息与表单元素的类型实现匹配 [type="email / url / number"] * 正则表达式验证 : pattern  * 常见的正则表达式 * [\u4e00-\u9fa5] : 匹配1个汉字 * 0?(13|14|15|17|18|19)[0-9]{9} : 匹配手机号码 * \d{17}[\d|x]|\d{15} : 匹配身份证 * [A-Za-z0-9_\-\u4e00-\u9fa5]+ : 匹配用户名 * 更多信息,请查阅: [http://tool.chinaz.com/regex/](http://tool.chinaz.com/regex/) 或者 [https://tool.oschina.net/regex#](https://tool.oschina.net/regex#) --- <div class="tip inlineBlock info simple"> ▶️ 开始学习下一章: [HTML从入门到精通 - 初识CSS3](https://jbea.cn/archives/517.html) </div> 最后修改：2024 年 04 月 22 日 © 允许规范转载 赞 13 都滑到这里了，不点赞再走！？
