HTML Form 表单练习代码分享
表单是网页中最常用的元素，是网站服务器端与客户端之间沟通的桥梁。表单被广泛应用于各种信息的搜索与反馈中。
下图关于表单的标签：
表单是一个容器，可以存放各种表单元素，如按钮、文本域等。表单中通常包含一个或多个表单元素，常见的表单元素如下图：
input，select，textarea是比较常用的表单元素，今天我们主要介绍input元素。
下面展示一下一个我们用input元素制作的一个学员信息收集表：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>form表单实验</title> </head> <body> <h2>学员信息收集表</h2> <!-- 想要行使form标签的所有特性， 内部的元素必须配置name属性 --> <form action="#" method="GET"> <!-- 配置input为文本输入框 --> 姓名：<input name="username" type="text" value="请输入您的姓名" size="20" maxlength="20"> <br><br> <!-- 配置input为密码输入框 --> 密码：<input name="password" type="password" value="请输入您的密码" size="20" maxlength="16"> <br><br> <!-- 配置input为单选框 --> 性别： <input name="性别" type="radio" value="male" >男 <input name="性别" type="radio" value="female">女 <br><br> <!--配置input为单选框--> 年级： <input name="年级" type="radio" value="大一">大一 <input name="年级" type="radio" value="大二">大二 <input name="年级" type="radio" value="大三">大三 <br><br> <!-- 配置input为多选框 --> 兴趣： <input name="兴趣" type="checkbox" value="编程">编程 <input name="兴趣" type="checkbox" value="设计">设计 <input name="兴趣" type="checkbox" value="游戏">游戏 <br><br> <!-- 配置input为文件选择框（头像上传） --> 头像上传：<input name="avatar" type="file"> <br><br> <!-- 配置input为提交按钮 --> <input name="提交" type="submit"> <!-- 配置input为重置按钮 --> <input name="重置" type="reset"> </form> </body> </html>下面介绍一下表单中一些元素的属性值还有功能说明：
下面简单介绍一下代码中的一些元素：
name：该表项的控制名 主要在处理表单时起作用
maxlength ：限制最大输入长度（例如：手机号为11位/规定密码6位数）
单选框为radio，要是我们想在单选框一开始要给出一个默认项怎么办呢，只需要在代码的最后加上checked；注：单选框name必须一致，才能实现互斥选择，要是不一致将会呈现复选框的效果
复选框为checkbox，同组name=“兴趣”一致，每个加value
reset为重置按钮，用 value 显示按钮文字，注意重置逻辑
submit为提交按钮，用 value 显示按钮文字，触发表单提交
以上就是本次 HTML Form 表单练习 的完整代码和注意事项分享。