简单易懂！深入浅出讲解表单中input元素的基础知识
最编程
2024-07-20 21:33:55
...
定义和用法
<form> 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素，比如文本框、多选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向服务器传输数据，如注册页面等。
input
定义和用法
<input> 标签用于搜集用户信息。
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
text文本框
<html>
<body>
<form>
账号：
<input type="text">
<br />
密码：
<input type="password">
</form>
</body>
</html>
效果如下
加上value可以框内加入想添加的内容
<html>
<body>
<form>
账号：
<input type="text" value="账号">
<br />
密码：
<input type="password" value="密码">
</form>
</body>
</html>
效果如下
且因为是密码框不显示内容。
input还可以加
| 代码 | 效果 | 注释 |
| submit | 提交按钮 | 如果您点击提交，表单数据会被发送到<form action="页面地址">里面的页面地址 |
| password | 密码框 | |
| checkbox | 多选按钮 | 每一个选项都要加上type="checkbox" name可不加 |
| radio | 单选按钮 | 必须加name属性且name必须一致，默认选中添加checked的选项 |
| reset | 重置按钮 | 重置页面回到初始状态 |
| image | 图像按钮 | 可以插入图片的按钮 |
| botton | 按钮 | 无效果按钮 |
| file |
上传文件按钮 | |
| 邮箱框 | 且必须输入正确格式的邮箱不然无法跳转，提交按钮需要自己加上
|
难点checked使用教学
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form>
男
<input type="radio" checked="checked" name ="性别" value="男">
<br />
女
<input type="radio" name="性别" value="女">
</form>
</body>
</html>
效果如下
