HTML中的表单（超详细）

一、表单

1.语法

<!-- action：提交的地方 
	method：提交的方式（get会显示，post不会）
-->
<form action="#" method="get">
    <p>
        名字：<input name="name" type="text"/>
    </p>
    <p>
        密码：<input type="password" name="pwd" id="">
    </p>
    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>
</form>

在实际的网页开发中通常采用post方式提交表单中的数据

2.表单元素格式

<!-- 基本语法 -->
<input type="input元素类型" name="input元素名称" value="input元素的默认值" />

3.表单元素

3.1文本框

<input name="name" type="text" value="蔡徐坤" size="3" maxlength="3"/>

3.2密码框

<input type="password" name="pwd" value="123" size="13" maxlength="13">

3.3单选按钮

<p>
    性别：
    <input type="radio" name="gender" value="男">男
    <input type="radio" name="gender" value="女" checked>女
</p>

radio：单选按钮

name：如果是一组，那么取相同的name

对于radio，value是必须的

checked:单选按钮默认选中的状态

3.4复选框

<p>
    爱好：
    <input type="checkbox" name="hob" value="sports"/>运动
    <input type="checkbox" name="hob" value="talk" checked/>聊天
    <input type="checkbox" name="hob" value="play"/>玩游戏
</p>

checkbox：复选框

name：一组复选框有相同的name

value：值

checked：复选框默认选中状态

3.5列表框（下拉列表框）

<p>
    年龄:
    <select name="age">
        <option value="18">18岁</option>
        <option value="19" selected = "selected">19岁</option>
        <option value="20">20岁</option>
    </select>
</p>

select：列表框

option：选项

value：表单提交的选项的值，如果不写默认提交option中的类容

selected：默认选中项

3.6按钮

图片按钮

<p>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</p>
<p>
    <input type="image" src="images/btn.png">
    <input type="button" value="普通按钮">
</p>

submit：提交按钮

reset：表单重置按钮

image：图片提交按钮

button：普通按钮，天生不具备任何功能，可通过js赋予功能

3.7多行文本域

<p>
    个人简介：
    <textarea cols="30" rows="10" name="person">文本内容</textarea>
</p>

textarea：多行文本域

cols：显示的列数

rows：显示的行数

3.8文件域

<form action="#" method="get" enctype="multipart/form-data">
    <p>
        头像：
        <input type="file" name="files">
    </p>
</form>

file:文件域

enctype=“multipart/form-data”：如果要上传文件必须加。它表示表单编码属性

3.9邮箱

<p>
    邮箱：
    <input type="email" name="email" id="">
</p>

type如果指定是email，会自动验证email地址格式是否正确

3.10网址

<p>
    个人网站：
    <input type="url" name="net">
</p>

type指定是url，会自动验证url地址格式是否正确

3.11数字

<p>
    年龄：
    <input type="number" name="myage" min="0" max="10" step="2">
</p>

number:表示是数字输入框

min：最小值

max：最大值

step：步进（每次加/减多少）

3.12滑块

<p>
    请输入数字：
    <input type="range" name="range1" min="0" max="10" step="2">
</p>

range：滑块

min：允许的最小值

max：允许的最大值

step：合法的数字间隔

3.13搜索框

<form action="#" method="get">
    <p>
        请输入搜索的关键字：
        <input type="search" name="sousuo">
        <input type="submit" value="搜索">
    </p>
</form>

search

4.表单的高级应用

4.1隐藏域

表单在提交的时候需要提交，但是又不希望被用户看到，这样就需要用到隐藏域

<input type="hidden" name="id" value="123">

type=hidden

4.2只读

姓名：<input type="text" name="name" id="" value="蔡徐坤" readonly>

readonly：只允许读，不允许修改

4.3禁用

<input type="submit" value="提交" disabled>

disabled:表示禁用

5.表单元素的标注

增强鼠标的可用性

自动将焦点转移到与该标注相关的表单元素上

<label>标签的for属性应该与表单控件的id属性值相同，以此来建立<label>与表单控件之间的关联。如果<label>元素直接包含了表单控件（如<input>），则不需要使用for属性，因为关联是隐式的。

示例1：使用for属性
<p>
    <label for="age">年龄：</label>
    <input type="number" name="age" id="age">
</p>

示例2：隐式关联
<form>  
  <label>  
    邮箱:  
    <input type="email" id="email" name="email">  
  </label>  
  <br><br>  
  <!-- 其他的表单元素 -->  
</form>

6.表单初级验证

6.1为什么要进行表单验证

表单验证好处：

• 减轻服务器的压力

• 保证数据的可行性和安全性

6.2初级方法

6.2.1placeholder

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

<p>
    用户名：
    <input type="text" name="name" id="" placeholder="请输入用户名，只能中文">
</p>

6.2.2required

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

<p>
    用户名：
    <input type="text" name="name" id="" placeholder="请输入用户名，只能字母" required>
</p>

6.2.3pattern

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

 <!-- 
        pattern:规则，要求我们写正则表达式
            []表示一位，中间缩写的内容可以任选一个是合法的
            0-9 表示从0到9    a-z：从小写a到小写z
            [xx]{n}  他表示前面的一位按照规则重复n次

        用户名只能是数字、字母或下划线，并且长度是3到15

        [xxx]{1,}至少重复一次，无上限
    -->
    <form action="#" method="get">
        <p>
            用户名：
            <input type="text" name="name" id="" placeholder="请输入用户名" required pattern="[a-zA-Z0-9_]{3,15}">
        </p>
        <p>
            密码：
            <input type="password" name="pwd" id="" placeholder="请输入密码">
        </p>
        <p>
            手机号：
            <input type="text" name="tel" required pattern="1[3578][0-9]{9}">
        </p>
        <p>
            <input type="submit" value="提交">
        </p>
    </form>

二、总结