HTML form表单

我就是我 2023-07-20 13:31 7阅读 0赞

**目录**

表单标签

表单域

表单按钮

input与label联合使用

表单分组

表单的初级验证

参考

--------------------

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

# 表单标签 #

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

部分属性说明：

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

# 表单域 #

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

### 单行文本框 ###

### 密码框 ###

### 单选按钮 ###

<input name="gen"(name相同为同一组) type="radio"(单选按钮框) value="男"(值) />男
    <input name="gen" type="radio" value="女" checked(单选按钮选中状态) />女

### 复选框 ###

<input type="checkbox"(复选框) name="interest" value="sports"(值)/>运动
    <input type="checkbox" name="interest" value="talk" checked(复选框选中状态) />聊天
    <input type="checkbox" name="interest" value="play"/>玩游戏

### 文件选择框 ###

### 多行文本框 ###

<textarea(多行文本域)  name="showText"  cols="x"(显示的列数)  rows="y"(显示的行数) wrap="off"(换行方式)>
        文本内容 
    </textarea  >

### 列表选择框 ###

<select(列表框) name="myselect" size="5"(显示行数)  multiple="multiple"(多选)>
        <option value="a" selected="selected"(默认选中项)>…</option >
        <option(选项) value="b">…</option >
    </select>

### 隐藏域 ###

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

### 邮箱 ###

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

### 网址 ###

<p>请输入你的网址:<input type="url"（网址）  name="userUrl"/></p>

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

### 数字 ###

### 滑块 ###

### 搜索框 ###

### 日期选择 ###

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

# 表单按钮 #

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70][]

# input与label联合使用 #

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

<label for="name">Name:</label>
    <input id="name" type="text"/>
    
    
    <label for="name">
        <input id="name" type="text"/>
    </label>

# 表单分组 #

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

# 表单的初级验证 #

表单验证的好处

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

表单初级验证的方法

*  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_www.w3school.com.cn_html_html_forms.asp]

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

参考博客：[https://blog.csdn.net/Useless\_csdn/article/details/86325530][https_blog.csdn.net_Useless_csdn_article_details_86325530]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmdqaWFuYm8xOTky_size_16_color_FFFFFF_t_70]: /images/20230528/27706f67891a4715964f4ea21402bc92.png
[https_www.w3school.com.cn_html_html_forms.asp]: https://www.w3school.com.cn/html/html_forms.asp
[https_blog.csdn.net_nanjinzhu_article_details_82251110]: https://blog.csdn.net/nanjinzhu/article/details/82251110
[https_blog.csdn.net_Useless_csdn_article_details_86325530]: https://blog.csdn.net/Useless_csdn/article/details/86325530