HTML中的表单 - 技术栈

1.表单的作用

很多情况下我们需要在网页中实现输入功能，收集一些用户的信息（如用户名、电话、邮箱等），就需要用到HTML表单。
HTML表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到服务器端
表单中包含了输入框、复选框、单选按钮、提交按钮等不同的表单控件，用户通过修改表单中的元素来完成表单，再通过提交按钮将表单数据提交给后端
在HTML中，表单使用标签来定义
一个完整的表单通常由三部分组成：表单域 、表单控件 和提示信息

表单域： < form method="提交的方式" action="表单提交的路径">

get(从指定的资源请求可以被缓存保存在历史记录中请求长度的限制不应该暴露敏感信息 )

http://localhost:8080/xxxx/user/xxxx?id=xxx&name=zhangsan

post ：（向指定的资源提交被处理的数据请求不会被缓存的请求的长度没有限制）

put delete

表单标签：input

2.表单的输入类型

输入类型是由type属性定义的，常见的输入类型有以下几种：

类型	作用	描述
`text`	文本框	可以输入汉字、字母、数字、字符等内容
`password`	密码框	输入密码不会明文显示
`email`	邮箱输入框	自动验证邮箱号码的格式
`url`	url输入框	自动验证url地址
`number`	数字输入框	自动验证输入的格式，只能输入数字
`search`	搜索框	用于搜索域
`hidden`	隐藏域	需要传递数据，但页面上不显示数据时使用，通常用于传递id
`radio`	单选	用于定义单选框选项
`checkbox`	多选	用于定义复选框选项
`file`	上传文件	用于在网页中上传文件
`color`	颜色选择器	用于颜色的选取
`date`	日期	日期选择器
`time`	时间	时间选择器
`datetime-local`	日期和时间	同时选择日期和具体时间
`week`	星期	选择某一年的第几周
`month`	月份	用于选择具体月份

3.代码实现

复制代码

<!-- 表单域  -->
<form method="post" action="#">
    <!--  表单控件   -->
    <!--   默认值：文本字段   -->
    <!--    readonly 只读-->
    <!--    disabled 禁用-->
    <input type="text" value="默认值"/><br/>
    <!--  密码框  -->
    <input type="password" value="默认值"/><br/>

    <!--  单选按钮  name：将多个 radio分为一组 -->
    <!--    checked 默认选中-->
    <label for="sex1">男：</label><input id="sex1" type="radio" name="sex" value="1"/>
    <label>女：<input type="radio" checked name="sex" value="2"/></label>
    <br/>
    <!-- 多选 按钮  -->
    爱好：<label><input type="checkbox" name="" value="1"/> 苹果</label>
    <input type="checkbox" checked name="" value="2"/> 蓝莓
    <input type="checkbox" name="" value="3s"/> 草莓
    <br/>
    <!--  图像  -->
    <input type="image" src="images/112624.png" width="100"/><br/>
    <!--   隐藏域  -->
    <input type="hidden" value="我是隐藏的数据"/>
    <!--  文件选择  accept:  image/* 接收所有的图片 -->
    <!-- image/png 只接收png格式的图片   -->
    <!--   audio/*  只接收音频 -->
    <!--    video/* 只接受视频-->
    <!--    multiple="multiple" 设置一次选择多个文件-->
    <input type="file"/><br/>
    <!--   数字输入框   step :步长 -->
    <input type="number" step="2" value="1"/><br/>
    <!--   搜索框 -->
    <input type="search"/><br/>
    <!--  日期选择框  -->
    <input type="date"/><br/>
    <!--  时间选择框  -->
    <input type="time"/><br/>
    <!--  日期时间选择框  -->
    <input type="datetime-local"/><br/>
    <!-- 星期选择    -->
    <input type="week"/>
    <!--  邮件输入框  -->
    <!--    <input type="email"/><br/>-->
    <input type="color"/><br/>
    <!-- 普通 按钮  -->
    <input type="button" value="默认值"/><br/>
    <!--  重置按钮  -->
    <input type="reset" value="重置"/><br/>
    <!--  提交 ：提交表单  -->
    <input type="submit" value="提交"/><br/>
</form>