表单语法

HTML表单 随笔 第1张

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。

注意:提交的方式一般为post,但是如果没有服务器的话,你在测试的时候会显示内部服务器错误,但是get提交会成功过,因为本人使用的是HBuilder,所以使用get提交成功是完全可以的,因为这HBuilder里边内置服务器可以处理这个问题,实际开发中还是要用post提交的

 

表单元素格式

语法:

HTML表单 随笔 第2张

 属性和说明

  type:指定元素的类型。text、password、checkout、radio、submit、reset、file、hidden、images和button,默认为text

  name:指定表单元素的名称

  value:元素的初始值。type为radio的时候指定一个值

  size:指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符串为单位,对于其它类型,宽度以像素为单位

  maxlength:type为text或password时,输入的最大字符数

  checked:type为radio或checkbox时,指定按钮是否被选中

 

 

表单元素

文本框---语法

HTML表单 随笔 第3张

 

密码框---语法

 HTML表单 随笔 第4张

 

单选框---语法

HTML表单 随笔 第5张

 

复选框---语法

HTML表单 随笔 第6张

 

列表框---语法

HTML表单 随笔 第7张

 

按钮---语法

HTML表单 随笔 第8张

 

多行文本域---语法

HTML表单 随笔 第9张

 

文件域---语法

HTML表单 随笔 第10张

 

邮箱---语法

HTML表单 随笔 第11张

注意:会自动验证Email地址格式是否正确

 

网址---语法

 HTML表单 随笔 第12张

注意:会自动验证URL地址格式是否正确

 

数字---语法

HTML表单 随笔 第13张

 

滑块---语法

HTML表单 随笔 第14张

 

搜索框---语法

HTML表单 随笔 第15张

 

颜色选择--语法 

HTML表单 随笔 第16张

 

显示完整的日期--语法

HTML表单 随笔 第17张

 

显示完整的日期(Opera浏览器下)--语法

HTML表单 随笔 第18张

 

显示时间---语法

HTML表单 随笔 第19张

 

显示日期---语法

HTML表单 随笔 第20张

 

显示周---语法

HTML表单 随笔 第21张

 

显示月---语法

HTML表单 随笔 第22张

 

 

表单的高级验证

隐藏域---语法

HTML表单 随笔 第23张

 

只读和禁用---语法

HTML表单 随笔 第24张

 

 

表单的初级验证

表单验证的好处

  1.减轻服务器的压力

  2.保证数据的可行性和安全性 

表单初级验证的方法

  1.placeholder  文本框提示语

  HTML表单 随笔 第25张

  2.required 规定文本框填写内容不能为空,否则不允许用户提交表单

  HTML表单 随笔 第26张

  3.pattern 用户输入的内容必须符合正则表达式所指的规则,否则就不能提交表单

  HTML表单 随笔 第27张

 

扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄