HTML常用表单元素使用?

2023-12-15 17:30:12


在这里插入图片描述
在这里插入图片描述

一、常用表单元素使用的关键字

<form action="提交数据的路径" method="POST/GET">
文本框:<input type="text" value="" placeHoLder="输入框提示" id="id" disabled="禁用" readonly="只读" required="输入框必填" hidden="隐藏" pattern="正则表达式" maxlength="最大长度"
minlength="最小长度" size="输入框的长度">
密码:<input type="password" value="">
email输入框:<input type="email" value="">
数字输入框:<input type="number" value="">
手机号输入框:<input type="tel" value="">
url:<input type="url" value="">
文件:<input type="file" value="">
滑块:<input type="range" value="">
搜索:<input type="search" value="">
单选框:<input type="radio" value="">
复选框:<input type="checkbox" value="">
下拉框:<select name="名字"><option value="" selected默认第一个显示></option></select>
文本域:<textarea value=""></textarea>
提交:<input type="submit" value="">
重置:<input type="reset" value="">
按钮:<input type="button" value="">
</form>

二、常用表单元素使用的效果与作用

(1)password : 保护用户的隐私

属性:password

密码:<input type="password" value="123456789">

在这里插入图片描述

(2) email: 输入邮件(比如QQ邮件)

属性:email

email输入框:<input type="email">

在这里插入图片描述

(3)、number : 输入框只能输入数字

属性:number

数字输入框:<input type="number" value="111">

在这里插入图片描述

(4)、tel : 常用于输入电话号

属性:tel

手机号输入框:<input type="tel" value="">

在这里插入图片描述

(5)、url : 用于输入网址

属性:url

url:<input type="url" value="">

在这里插入图片描述

(6)、file: 用于选择文件路径

属性:file

文件:<input type="file">

在这里插入图片描述

(7)、range:通常用于显示滑动条

属性:range

滑块:<input type="range" value="">

在这里插入图片描述

(8)、search:通常用于当作搜索栏

属性:search

搜索:<input type="search" value="">

在这里插入图片描述

(9)、radio:单选性别等

属性:radio
注意 :把input的name设置一样才能实现单选

<input type="radio" name="sex"><input type="radio" name="sex">

在这里插入图片描述

(10)、checkbox:和上一个相反,这个是多选

属性:checkbox

爱好 : <input type="checkbox">打篮球
<input type="checkbox">踢足球
<input type="checkbox">看书

在这里插入图片描述

(11)、select 标签和option 标签组合

属性:select 和 option
注 :selected是默认显示

地区:<select name="名字">
    <option value="湖南">湖南</option>
    <option value="湖北" selected>湖北</option>
    <option value="广东">广东</option>
</select>

在这里插入图片描述

(12)、textarea 文本域:一般用于留言,会话等功能

属性:textarea

留言:<textarea value="很高兴认识你"></textarea>

在这里插入图片描述

(13)、submit 按钮:用于提交试题,个人资料等

属性:submit

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

在这里插入图片描述

(14)、reset按钮 :用于重置

属性:reset

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

在这里插入图片描述

(15)、button按钮:普通按钮

属性:button

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

在这里插入图片描述

文章来源:https://blog.csdn.net/qwerty147532/article/details/134870723
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。