HTML常用表单元素使用

一、表单的简述

1、什么是表单

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

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

2、表单的用途

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

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

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

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

form表单属性：

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

注意：

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

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

表单常用元素：

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

    
    
    <labe>普通文本框labe>
    <input type="text" name="text" id="text">

密码框: password 定义密码字段

    
    密码文本框： <input type="password" name="password">

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

    
    单选框：
    <input type="radio" name="sex" value="男" checked>男
    <input type="radio" name="sex" value="女">女

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

    复选框：
    <input type="checkbox" name="hobby" value="足球">足球
    <input type="checkbox" name="hobby" value="排球">排球
    <input type="checkbox" name="hobby" value="乒乓球">兵乓球

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

    邮箱输入框： <input type="email" name="email">

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

   
    数字输入框： <input type="number" name="number">

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

 
 
数值滑块空间:<input type="range" min="2" max="20" step="3">

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

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

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

电话号码输入框：<input type="tel" name="tel" maxlength="11">

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

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

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

 请选择课程:
    <select name="recourse">
        <option value="语文" selected>语文option>
        <option value="数学">数学option>
        <option value="英文">英文option>
        <option value="体育">体育option>
    select>

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

 
文本域：<textarea name="" id="" cols="30" rows="10">textarea>

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

提交按钮：<input type="submit" value="提交按钮">

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

重置按钮：<input type="reset" value="重置按钮">

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

<input type="image" src="image/wallhaven-rrj5ow_1920x1080.png" height="50">

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

普通按钮：<input type="button" value="普通按钮">

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

文件上传框：<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”)

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

⭐最后⭐

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