html之为什么使用表单,常用表单元素使用?

文章目录


一、为什么使用表单呢?

为什么使用表单呢,使用表单是为了更好的收集用户数据,并且安全

二、常用表单元素使用

1、password密码框

密码框:会隐藏数据,以防给他人看见

html 复制代码
<input type="password">

运行结果:

2、text文本框

文本框:定义用于文本输入的单行输入字段

html 复制代码
<input type="text">

运行结果:

3、button普通按钮

普通按钮:普通按钮在form标签里会提交数据。此时普通按钮在form里面就会有提交的功能和提交按钮功能一样。

html 复制代码
<input type="button">

运行结果:

4、submit提交按钮

提交按钮:提交表单的按钮

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

运行结果:

5、file文件域

文件域:选择文件的地方

html 复制代码
<input type="file">

运行结果:

7、checkbox复选框

复选框:可以多选

html 复制代码
<input TYPE="checkbox">

运行结果:

8、radio单选按钮

checked默认选中

单选按钮:允许用户在有限数量的选项中选择其中之一

html 复制代码
<input type="radio" checked>

运行结果:

9、textarea文本域

文本域:一般存放很多数据的

html 复制代码
<textarea rows="行" cols="每行中的字符数"" ></textarea>

运行结果:

10、select下拉框

selected为默认选中

下拉框:只能选择一项,但有多项可选

html 复制代码
<select>
        <option>1</option>
        <option selected>2</option>
        <option>3</option>
    </select>

运行结果:

11、reset重置按钮

重置按钮:重置文件,重新输入

html 复制代码
<input type="reset" value="重置">

运行结果:

12、number数字框

数字框:只能输入数字的框

html 复制代码
<strong>数字框</strong>
<input type="number">

运行结果:

13、size长度宽度

长度宽度:设置文本框的宽度长度

html 复制代码
<input type="text" size="长度">

运行结果:

三、总结

作用 关键单词
文本框 text
密码框 password
普通按钮 button
提交按钮 submit
文件域 file
重置按钮 reset
数字框 number
下拉框 select option
下拉框默认选中 selected
复选框 checkbox
数字框最小 min
数字框最大 max
文本框最大输入 maxlength
长度宽度 size
相关推荐
肖魏眸2 分钟前
vue3 格式化 : antfu 组合 prettier & eslint & 提交格式化校验
前端·代码规范
婉婉耶2 分钟前
VUE带你乘风破浪~
前端·vue.js
橘黄的猫3 分钟前
深入浅出掌握 Git 子模块:项目管理利器
前端·github
大厂内参PRO3 分钟前
不止于补全,智能ai助手计稿一键转代码+规则管理,解锁编程新姿势
前端
小赖同学啊15 分钟前
光伏园区3d系统管理
前端·javascript·3d
木叶丸22 分钟前
编程开发中,那些你必须掌握的基本概念
前端·数据结构·编程语言
前端进阶者23 分钟前
js通知提醒
前端·javascript
拖孩28 分钟前
微信群太多,管理麻烦?那试试接入AI助手吧~
前端·后端·微信
乌兰麦朵1 小时前
Vue吹的颅内高潮,全靠选择性失明和 .value 的PUA!
前端·vue.js
Code季风1 小时前
Gin Web 层集成 Viper 配置文件和 Zap 日志文件指南(下)
前端·微服务·架构·go·gin