HTML Form 表单练习代码分享

表单是网页中最常用的元素是网站服务器端与客户端之间沟通的桥梁。表单被广泛应用于各种信息的搜索与反馈中。下图关于表单的标签表单是一个容器可以存放各种表单元素如按钮、文本域等。表单中通常包含一个或多个表单元素常见的表单元素如下图inputselecttextarea是比较常用的表单元素今天我们主要介绍input元素。下面展示一下一个我们用input元素制作的一个学员信息收集表!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleform表单实验/title /head body h2学员信息收集表/h2 !-- 想要行使form标签的所有特性 内部的元素必须配置name属性 -- form action# methodGET !-- 配置input为文本输入框 -- 姓名input nameusername typetext value请输入您的姓名 size20 maxlength20 brbr !-- 配置input为密码输入框 -- 密码input namepassword typepassword value请输入您的密码 size20 maxlength16 brbr !-- 配置input为单选框 -- 性别 input name性别 typeradio valuemale 男 input name性别 typeradio valuefemale女 brbr !--配置input为单选框-- 年级 input name年级 typeradio value大一大一 input name年级 typeradio value大二大二 input name年级 typeradio value大三大三 brbr !-- 配置input为多选框 -- 兴趣 input name兴趣 typecheckbox value编程编程 input name兴趣 typecheckbox value设计设计 input name兴趣 typecheckbox value游戏游戏 brbr !-- 配置input为文件选择框头像上传 -- 头像上传input nameavatar typefile brbr !-- 配置input为提交按钮 -- input name提交 typesubmit !-- 配置input为重置按钮 -- input name重置 typereset /form /body /html下面介绍一下表单中一些元素的属性值还有功能说明下面简单介绍一下代码中的一些元素name该表项的控制名 主要在处理表单时起作用maxlength 限制最大输入长度例如手机号为11位/规定密码6位数单选框为radio要是我们想在单选框一开始要给出一个默认项怎么办呢只需要在代码的最后加上checked注单选框name必须一致才能实现互斥选择要是不一致将会呈现复选框的效果复选框为checkbox同组name“兴趣”一致每个加valuereset为重置按钮用 value 显示按钮文字注意重置逻辑submit为提交按钮用 value 显示按钮文字触发表单提交以上就是本次 HTML Form 表单练习 的完整代码和注意事项分享。