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