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

文章目录

  • 一、为什么使用表单呢?
  • 二、常用表单元素使用
  • 三、总结


一、为什么使用表单呢?

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

二、常用表单元素使用

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

<input type="password">

运行结果:
在这里插入图片描述

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

<input type="text">

运行结果:
在这里插入图片描述

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

<input type="button">

运行结果:
在这里插入图片描述

4、submit提交按钮
提交按钮:提交表单的按钮

<input type="submit" value="提交">

运行结果:
在这里插入图片描述

5、file文件域
文件域:选择文件的地方

<input type="file">

运行结果:
在这里插入图片描述

7、checkbox复选框
复选框:可以多选

<input TYPE="checkbox">

运行结果:
在这里插入图片描述

8、radio单选按钮
checked默认选中
单选按钮:允许用户在有限数量的选项中选择其中之一

<input type="radio" checked>

运行结果:
在这里插入图片描述

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

<textarea rows="" cols="每行中的字符数"" >textarea>

运行结果:
html之为什么使用表单,常用表单元素使用?_第1张图片

10、select下拉框
selected为默认选中
下拉框:只能选择一项,但有多项可选

<select>
        <option>1option>
        <option selected>2option>
        <option>3option>
    select>

运行结果:
在这里插入图片描述

11、reset重置按钮
重置按钮:重置文件,重新输入

<input type="reset" value="重置">

运行结果:
在这里插入图片描述

12、number数字框
数字框:只能输入数字的框

<strong>数字框strong>
<input type="number">

运行结果:
在这里插入图片描述

13、size长度宽度
长度宽度:设置文本框的宽度长度

<input type="text" size="长度">

运行结果:
在这里插入图片描述

三、总结

作用 关键单词
文本框 text
密码框 password
普通按钮 button
提交按钮 submit
文件域 file
重置按钮 reset
数字框 number
下拉框 select option
下拉框默认选中 selected
复选框 checkbox
数字框最小 min
数字框最大 max
文本框最大输入 maxlength
长度宽度 size

你可能感兴趣的:(html,前端,服务器)