HTML常用表单元素使用

🥏一、表单的简述

🎯1、什么是表单

HTML 表单的主要作用是接收用户的输入，当用户提交表单时，浏览器将用户在表单中输入的数据打包，并发送给服务器，从而实现用户与Web服务器的交互。

表单是控件的容器，一个表单由form元素、表单控件和表单按钮三部分组成。

🎯2、表单的用途

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

表单的基本语法：
我们可以使用 form 标签来创建表单:

<form action="表单提交地址" method="提交方法">
    … 文本框、按钮等表单元素…
</form>

form表单属性：

属性	说明
action	用于指定提交表单数据的请求URL。
method	表单数据发送至服务器的方法,常用的有两种 get(默认)/post。

注意：

get：从指定的资源请求数据。
post：向指定的资源提交要被处理的数据

🥏二、常用表单元素以及元素属性

表单常用元素：

文本框：text定义一个单行的文本字段（默认宽度为 20 个字符）

    <!-- name可以为表单控件起名，其名称在提交表单时会传输给服务器 -->
    <!-- value可以为文本框赋默认值 -->
    <labe>普通文本框</labe>
    <input type="text" name="text" id="text">

密码框: password 定义密码字段

    <!-- type="password" 表示密码文本框，其输入的内容以密文的形式出现 -->
    密码文本框： <input type="password" name="password">

单选按钮: radio 定义单选按钮。(性别等)

    <!-- type="radio" 使用name属性可以让单选按钮进行分组 name相同时一次只能选择一个 -->
    单选框：
    <input type="radio" name="sex" value="男" checked>男
    <input type="radio" name="sex" value="女">女

复选框: checkbox 定义复选框。(爱好等)

<!-- checked表示默认选中 -->
    复选框：
    <input type="checkbox" name="hobby" value="足球">足球
    <input type="checkbox" name="hobby" value="排球">排球
    <input type="checkbox" name="hobby" value="乒乓球">兵乓球

电子邮箱: email包含 e-mail 地址的输入域(有校验)

<!-- type="email" 在移动端会显示@ -->
    邮箱输入框： <input type="email" name="email">

数值框: number输入类型用于包含数字值的输入字段，可以设置可接受数字的限制。

   <!-- type="number" 表示数字数据库，只允许用户输入数字，小数或者负数 -->
    数字输入框： <input type="number" name="number">

数值滑块空间: range用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。

 <!--无论是数值框还是数值滑块，都具有如下三个属性：-->
 <!--max 最大值、min 最小值、step 步长-->
数值滑块空间:<input type="range" min="2" max="20" step="3">

搜索框: search用于搜索字段，比如站内搜索或谷歌搜索等。

 搜索框：<input type="search" name="search">

电话号码框: tel定义输入电话号码字段,但是不会进行校验

<!-- maxlength="11"表示输入最大的字符数 -->
电话号码输入框：<input type="tel" name="tel" maxlength="11">

url地址: url包含 URL 地址的输入字段。会在提交表单时对 url 字段的值自动进行验证。

<input type="url" name="url">

下拉框: select、option select定义了下拉选项列表，option定义下拉列表中的选项（一个条目）。

<!-- selected指定默认选中 -->
 请选择课程:
    <select name="recourse">
        <option value="语文" selected>语文</option>
        <option value="数学">数学</option>
        <option value="英文">英文</option>
        <option value="体育">体育</option>
    </select>

文本域: textarea定义文本域 (一个多行的输入控件)

 <!-- cols相当于width rows相当于heigh -->
文本域：<textarea name="" id="" cols="30" rows="10"></textarea>

提交按钮: submit 定义提交按钮。

<!-- type="submit" 结合(form)表单域实现提交效果
在表单中 submit 点击之后会自从触发提交行为，会向action指定的地址提交，请求方式为method指定的方式通常表单提交为post-->
提交按钮：<input type="submit" value="提交按钮">

重置按钮: reset 定义重置按钮（重置所有的表单值为默认值）。

<!-- reset表示重置按钮，会让表单回到默认值-->
重置按钮：<input type="reset" value="重置按钮">

图片提交按钮: image 定义图像作为提交按钮。

<!-- 图片会被当作一个按钮 -->
<input type="image" src="image/wallhaven-rrj5ow_1920x1080.png" height="50">

普通按钮: button 定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）

<!-- type="button"在value属性中可以显示按钮的内容 -->
普通按钮：<input type="button" value="普通按钮">

文件上传框: file 定义文件选择字段和 “浏览…” 按钮，供文件上传。

<!-- accept属性可以过滤文件 -->
文件上传框：<input type="file" name="file" accept="img/*">

表单元素常用属性：

属性	值	描述
type	上述值	type 属性规定要显示的 input元素的类型。
value	text	指定 input元素 value 的值。
name	text	name 属性规定 input元素的名称。
src	URL	src 属性规定显示为提交按钮的图像的 URL。 (只针对 type=“image”)
size	number	size 属性规定以字符数计的 元素的可见宽度。
readonly	readonly	readonly 属性规定输入字段是只读的。
required	required	required属性规定输入框必填
disabled	disabled	disabled 属性规定应该禁用的 input元素。
hidden	hidden	定义隐藏输入字段。前后台交互非常有用
maxlength	number	属性规定 input元素中允许的最大字符数。
minLength	number	属性规定 input元素中允许的最小字符数。
checked	checked	checked 属性规定在页面加载时应该被预先选定的 input元素。 (只针对 type=“checkbox” 或者 type=“radio”)
accept	audio/* video/* image/* MIME_type	规定通过文件上传来提交的文件的类型。 (只针对type=“file”)
selected	selected	下拉框的默认选中 (只针对type=“select”)

以上便是总结的所有表单信息了！

⭐最后⭐

总结不易，希望小宝们不要吝啬你们的👍哟(＾Ｕ＾)ノ~ＹＯ！！😀
如有问题，欢迎评论区批评指正😁