HTML form表单

目录

表单标签

表单域

表单按钮

input与label联合使用

表单分组

表单的初级验证

参考

HTML表单用于收集用户输入，主要分为表单标签及表单控件（控件又分表单域和按钮）。

表单标签

表单标签是一个包含表单元素的区域，可以包含一些表单控件，语法如下：

部分属性说明：

• action：定义在提交表单时执行的动作，可以指定服务器端用来处理表单的程序的URL地址
• method：规定在提交表单时所用的 HTTP 方法（get 或 post）
• name：表单名称，如果要正确地被提交，每个输入字段必须设置一个 name 属性
• enctype：表单数据内容类型 

表单域

表单域一般位于标签之间，包括文本框、密码框、单选框、复选框等。下面列出一些表单元素的使用：

单行文本框

密码框

单选按钮

男
女

复选框

运动
聊天
玩游戏

文件选择框

多行文本框

    文本内容 

列表选择框

    …
    …

隐藏域

HTML5 增加了多个新的input类型，下面列出部分

邮箱

邮箱:

（会自动验证Email地址格式是否正确） 

网址

请输入你的网址:

（会自动验证URL地址格式是否正确）

数字

滑块

搜索框

日期选择

（除了datetime，还有date、week、month、time等，这个属性支持不太好，我用谷歌浏览器date有弹框，datetime没有）

表单按钮

图片按钮

效果如下：

input与label联合使用

当用户选择标签时，浏览器会自动将焦点转移到个相关的上

Name:




    

表单分组

 元素组合表单中的相关数据， 元素为 元素定义标题

  
    健康信息
    身高：
    体重：
  

表单的初级验证

表单验证的好处

• 减轻服务器的压力
• 保证数据的可行性和安全性

表单初级验证的方法

• placeholder                   
• required 
• pattern

placeholder

• input类型的文本框提供一种提示（hint）
• 可以描述文本框期待用户输入何种内容
• 提示语默认显示，当文本框中输入内容时提示语消失
• 适合于input标签：text、search、url、email和password等类型

required

• 规定文本框填写内容不能为空，否则不允许用户提交表单
• 适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

pattern

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

参考

参考教程：https://www.w3school.com.cn/html/html_forms.asp

参考博客：https://blog.csdn.net/nanjinzhu/article/details/82251110

参考博客：https://blog.csdn.net/Useless_csdn/article/details/86325530