HTML中的表单(超详细)

一、表单

1.语法

html 复制代码
<!-- 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.表单元素格式

html 复制代码
<!-- 基本语法 -->
<input type="input元素类型" name="input元素名称" value="input元素的默认值" />
属性 说明
type 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button。默认值是text。
name 指定表单元素的名称
value 元素的默认值,type为radio的时候必须指定一个值
size 指定表单元素的初始宽度。当type为text或password的时候,表单元素的大小是以字符为单位。对于其他类型,宽度是以像素为单位
maxlength type为text或password的时候,表示输入的最大字符数
checked type为radio或checkbox的时候,指定按钮是否被选中

3.表单元素

3.1文本框

html 复制代码
<input name="name" type="text" value="蔡徐坤" size="3" maxlength="3"/>

3.2密码框

html 复制代码
<input type="password" name="pwd" value="123" size="13" maxlength="13">

3.3单选按钮

html 复制代码
<p>
    性别:
    <input type="radio" name="gender" value="男">男
    <input type="radio" name="gender" value="女" checked>女
</p>

radio:单选按钮

name:如果是一组,那么取相同的name

对于radio,value是必须的

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

3.4复选框

html 复制代码
<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列表框(下拉列表框)

html 复制代码
<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按钮

图片按钮

html 复制代码
<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多行文本域

html 复制代码
<p>
    个人简介:
    <textarea cols="30" rows="10" name="person">文本内容</textarea>
</p>

textarea:多行文本域

cols:显示的列数

rows:显示的行数

3.8文件域

html 复制代码
<form action="#" method="get" enctype="multipart/form-data">
    <p>
        头像:
        <input type="file" name="files">
    </p>
</form>

file:文件域

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

3.9邮箱

html 复制代码
<p>
    邮箱:
    <input type="email" name="email" id="">
</p>

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

3.10网址

html 复制代码
<p>
    个人网站:
    <input type="url" name="net">
</p>

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

3.11数字

html 复制代码
<p>
    年龄:
    <input type="number" name="myage" min="0" max="10" step="2">
</p>

number:表示是数字输入框

min:最小值

max:最大值

step:步进(每次加/减多少)

3.12滑块

html 复制代码
<p>
    请输入数字:
    <input type="range" name="range1" min="0" max="10" step="2">
</p>

range:滑块

min:允许的最小值

max:允许的最大值

step:合法的数字间隔

3.13搜索框

html 复制代码
<form action="#" method="get">
    <p>
        请输入搜索的关键字:
        <input type="search" name="sousuo">
        <input type="submit" value="搜索">
    </p>
</form>

search

4.表单的高级应用

4.1隐藏域

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

html 复制代码
<input type="hidden" name="id" value="123">

type=hidden

4.2只读

html 复制代码
姓名:<input type="text" name="name" id="" value="蔡徐坤" readonly>

readonly:只允许读,不允许修改

4.3禁用

html 复制代码
<input type="submit" value="提交" disabled>

disabled:表示禁用

5.表单元素的标注

增强鼠标的可用性

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

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

html 复制代码
示例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等类型
html 复制代码
<p>
    用户名:
    <input type="text" name="name" id="" placeholder="请输入用户名,只能中文">
</p>
6.2.2required
  • 规定文本框填写内容不能为空,否则不允许用户提交表单
  • 适合于input标签:text、search、url、emial、password、number、checkbox、radio、file等类型
html 复制代码
<p>
    用户名:
    <input type="text" name="name" id="" placeholder="请输入用户名,只能字母" required>
</p>
6.2.3pattern

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

html 复制代码
 <!-- 
        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>

二、总结

相关推荐
腾讯TNTWeb前端团队6 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰10 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪10 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪10 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy11 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom11 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom11 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom11 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom12 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom12 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试