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
相关推荐
czhc11400756632 分钟前
Linux 77 FTP
linux·运维·服务器
满分观察网友z10 分钟前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端
满分观察网友z13 分钟前
别再裸写<textarea>了!一个“小”功能,我用上了它几乎所有API
前端
西西木科技丨Shopify开发机构18 分钟前
如何在 Shopify 中建立重定向
前端·html
汪子熙25 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到1126 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆30 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er35 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0638 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
張萠飛38 分钟前
Linux中程序的limits中的Max open files的配置由哪些参数决定
linux·运维·服务器