前端表单标签

最新推荐文章于 2024-05-03 13:57:34 发布

黄丫丫07

最新推荐文章于 2024-05-03 13:57:34 发布

阅读量112

点赞数

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/m0_51495354/article/details/127696739

版权

为什么需要表单呢

为了收集用户信息

在网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单。

表单的组成

表单域、表单控件、提示信息

表单域：包含表单元素的区域。

在html标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。

<form>会把它范围内的表单元素信息提交给服务器

<form action="demo.php" method="get" name="name1">

       

    </form>

表单元素：

<input>用于收集用户信息。

:<input type=”属性值” />

注意：<input / >标签为单标签

Type属性设置不同的属性值用来指定不同的控件类型。

Type值：

属性值	描述
Button	定义可点击按钮（多数情况下，用于通过js启动脚本）
Checkbox	定义复选框
File	定义输入字段和“浏览”按钮，供文件上传
Hidden	定义隐藏的输入字段
Image	定义图像形式的提交按钮
Password	定义密码字段，该字段中的字符被掩码
Radio	定义单选按钮，需要name值一样
Reset	定义重置按钮
Submit	定义提交按钮
text	定义单行的输入字段，默认宽度为20个字符

<input>标签其他属性，

属性	属性值	描述
Name	由用户自定义	定义input元素的名称
Value	由用户自定义	规定input元素的值
Checked	Checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度

注意：

Name和value是每个表单元素都有的属性值，主要给后台人员使用。

Name表单元素的名字，要求单选按钮和复选框要有相同的name值。

单选按钮和复选框可以设置checked属性，当页面打开时就可以默认选中这个按钮。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>input 表单元素</title>

</head>

<body>

    <form>

        <!-- text 文本框 用户可以在里面输入任何文字 -->

        用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"/><br/>

        <!-- password 密码框 用户看不见输入的东西 -->

        密码：<input type="password" name="pwd" /><br>

        <!-- radio 单选按钮 可以实现多选一 -->

        <!-- name是表单元素名字，这里性别单选按钮必须有相同的名字name才可以实现多选一 -->

        性别：男<input type="radio" name="sex" value="nan"/>女<input type="radio" name="sex" value="nv" checked="checked"/><br>

        <!-- checkbox 单选按钮 可以实现多选 -->

        爱好：吃饭<input type="checkbox" name="hobby" value="吃饭"/> 睡觉<input type="checkbox" name="hobby" value="睡觉"/> 打豆豆<input type="checkbox" name="hobby" value="打豆豆" checked="checked"/><br>



    </form>

</body>

</html>