网站开发和移动开发,网站名称重要吗,织梦模板大全,海南创作什么网站你好#xff0c;我是云桃桃。
一个希望帮助更多朋友快速入门 WEB 前端程序媛。 后台回复“前端工具”可免费获取开发工具#xff0c;持续更新。
今天来说说 HTML 表单。它是用于收集用户输入信息的元素集合。例如文本框、单选按钮、复选框、下拉列表等。
用户经常填写的表…你好我是云桃桃。
一个希望帮助更多朋友快速入门 WEB 前端程序媛。 后台回复“前端工具”可免费获取开发工具持续更新。
今天来说说 HTML 表单。它是用于收集用户输入信息的元素集合。例如文本框、单选按钮、复选框、下拉列表等。
用户经常填写的表单有用户注册表单登录表单搜索表单订阅表单联系表单调查问卷表单评论表单等这些基本都是通过表单实现的。比如下图淘宝登录就是一个表单。 表单在网页开发中承担着收集用户数据、实现用户互动、提供个性化服务、保障数据安全等重要作用是构建交互式和功能丰富的网页不可或缺的组成部分。
那我们一起来看看吧。
元素语法
1、input用于接受用户输入的文本、密码、日期等。
label forusername用户名/label input typetext idusername nameusername required /label 元素为输入框提供了标签文本 用户名通过 for 属性与相应的输入框关联此标签通常和表单元素一同使用。 input 元素创建了一个文本框用户可以在其中输入文本。typetext 表示文本框类型为文本输入id 属性用于关联 label 元素name 属性指定了输入框的名称required 属性表示该输入框为必填项。
而通过设置 typepassword 属性来指定输入类型为密码框你输入的内容是不可见的比如如下代码。
label forpassword密码/label input typepassword idpassword namepassword required /2、textarea用于接受多行文本输入。
label forcomments评论/labelbr /
textarea idcomments namecomments rows4 cols50/textarealabel 元素为文本域提供了标签文本 评论。 textarea 元素创建了一个文本域用户可以在其中输入多行文本。rows 和 cols 属性指定了文本域的行数和列数。
3、select用于创建下拉列表框。
label forcountry国家/label
select idcountry namecountryoption valuechina中国/optionoption valueusa美国/optionoption valueuk英国/optionoption valuejapan日本/option
/selectlabel 元素为下拉列表框提供了标签文本 国家。 select 元素创建了一个下拉列表框用户可以从预定义的选项中选择一个。name 属性指定了下拉列表框的名称选项通过 option 元素定义value 属性指定了每个选项的值显示的文本在 option 元素之间。
4、button用于创建按钮。
button typebutton onclickalert(Hello!)点击我/buttonbutton 元素创建了一个按钮文本内容为 点击我。 typebutton 属性指定了按钮的类型为普通按钮不会触发表单提交。 onclick 属性指定了按钮点击时执行的 JavaScript 代码这里是弹出一个提示框显示 Hello!。
5、checkbox用于创建复选框。
input typecheckbox idcoding nameinterests valuecoding / label forcoding编程/labelinput 元素创建了一个复选框typecheckbox 表示复选框类型id 属性用于关联标签文本name 属性指定了复选框的名称value 属性指定了复选框选中时提交的值。 label 元素为复选框提供了标签文本 编程通过 for 属性与相应的复选框关联。
6、radio用于创建单选按钮。
input typeradio idmale namegender valuemale /
label formale男/label
input typeradio idfemale namegender valuefemale /
label forfemale女/labelinput 元素创建了两个单选按钮typeradio 表示单选按钮类型id 属性用于关联标签文本name 属性指定了单选按钮所属的组value 属性指定了单选按钮选中时提交的值。 label 元素为单选按钮提供了标签文本 男 和 女通过 for 属性与相应的单选按钮关联。
综合应用
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title表单示例/title/headbodyh2用户调查问卷/h2form action/xxx methodpostlabel forusername用户名/labelinput typetext idusername nameusername required /br /br /label foremail邮箱/labelinput typeemail idemail nameemail required /br /br /label forpassword密码/labelinput typepassword idpassword namepassword required /br /br /label forconfirm_password确认密码/labelinput typepassword idconfirm_password nameconfirm_password required /br /br /label forgender性别/labelinput typeradio idmale namegender valuemale /label formale男/labelinput typeradio idfemale namegender valuefemale /label forfemale女/labelbr /br /label forinterests兴趣/labelbr /input typecheckbox idcoding nameinterests valuecoding /label forcoding编程/labelbr /input typecheckbox idreading nameinterests valuereading /label forreading阅读/labelbr /input typecheckbox idmusic nameinterests valuemusic /label formusic音乐/labelbr /br /label forcomments评论/labelbr /textarea idcomments namecomments rows4 cols50/textareabr /br /label forcountry国家/labelselect idcountry namecountryoption valuechina中国/optionoption valueusa美国/optionoption valueuk英国/optionoption valuejapan日本/option/selectbr /input typesubmit value提交 //form/body
/html代码效果如图 最后来说说form标签。它是表单元素用于包裹表单中的各个输入控件。它的 action 属性指定了表单提交的目标地址method 属性指定了提交的方式为 POST 方法还有 GET 方法具体根据实际项目后端交互而定。
ok以上本文完。
