表单项介绍

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6     </head>
  7     <body>
  8         <!-- 
  9             表单的作用就是用来将用户信息提交给服务器的
 10                 比如:百度的搜索框 注册 登录这些操作都需要填写表单
 11         -->
 12         
 13         
 14         <!--
 15             使用form标签创建一个表单
 16                 form标签中必须指定一个action属性,该属性指向的是一个服务器的地址
 17                 当我们提交表单时将会提交到action属性对应的地址    
 18         -->
 19         <form action="target.html">
 20             <!-- 
 21                 使用form创建的仅仅是一个空白的表单,
 22                     我们还需要向form中添加不同的表单项
 23             -->
 24             
 25             <!-- 
 26                 在表单中可以使用fieldset来为表单项进行分组,
 27                 可以将表单项中的同一组放到一个fieldset中
 28             -->
 29             <fieldset>
 30                 
 31                 <!-- 在fieldset可以使用legend子标签,来指定组名 -->
 32                 <legend>用户信息</legend>
 33                 
 34                 
 35                 <!-- 
 36                     使用input来创建一个文本框,它的type属性是text
 37                         如果希望表单项中的数据会提交到服务器中,还必须给表单项指定一个name属性
 38                         name表示提交内容的名字    
 39                         
 40                     用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器
 41                         url地址?查询字符串
 42                     格式:
 43                         属性名=属性值&属性名=属性值&属性名=属性值&属性名=属性值
 44                     在文本框中也可以指定value属性值,该值将会作为文本框的默认值显示    
 45                 -->
 46                 <!-- 
 47                     在html中还为我们提供了一个标签,专门用来选中表单中的提示文字的
 48                     label标签
 49                     该标签可以指定一个for属性,该属性的值需要指定一个表单项的id值
 50                 -->
 51                 <label for="um">用户名</label>
 52                 <input id="um" type="text" name="username"  /> <br /><br />
 53                 
 54                 <!--
 55                     密码框
 56                         - 使用input创建一个密码框,它的type属性值是password
 57                 -->
 58                 <label for="pwd">密码 </label>
 59                 <input id="pwd" type="password" name="password" /> <br /><br />
 60             </fieldset>
 61             
 62             <fieldset >
 63                 
 64                 <legend>用户爱好</legend>
 65             
 66             <!--
 67                 单选按钮
 68                     - 使用input来创建一个单选按钮,它的type属性使用radio
 69                     - 单选按钮通过name属性进行分组,name属性相同是一组按钮
 70                     - 像这种需要用户选择但是不需要用户直接填写内容的表单项,
 71                         还必须指定一个value属性,这样被选中的表单项的value属性值将会最终提交给服务器
 72                         
 73                     如果希望在单选按钮或者是多选框中指定默认选中的选项,
 74                         则可以在希望选中的项中添加checked="checked"属性
 75             -->
 76             性别  <input type="radio" name="gender" value="male" id="male" /><label for="male"></label>
 77                 <input type="radio" name="gender" value="female" checked="checked" id="female" /><label for="female"></label> 
 78                 <br /><br />
 79             
 80             <!-- 
 81                 多选框
 82                     - 使用input创建一个多选框,它的type属性使用checkbox
 83             -->
 84             爱好     <input type="checkbox" name="hobby" value="zq" />足球
 85                 <input type="checkbox" name="hobby" value="lq" />篮球
 86                 <input type="checkbox" name="hobby" value="ymq" checked="checked" />羽毛球
 87                 <input type="checkbox" name="hobby" value="ppq" checked="checked"/>乒乓球
 88             <br /><br />
 89             
 90             </fieldset>
 91             
 92             <!-- 
 93                 下拉列表
 94                     - 使用select来创建一个下拉列表
 95                     下拉列表的name属性需要指定给select,而value属性需要指定给option
 96                     可以通过在option中添加selected="selected"来将选项设置为默认选中
 97                     
 98                     当为select添加一个multiple="multiple",则下拉列表变为一个多选的下拉列表
 99             -->
100             你喜欢的明星 
101                 <select name="star">
102                     
103                     <!-- 
104                         在select中可以使用optgroup对选项进行分组
105                             同一个optgroup中的选项是一组
106                         可以通过label属性来指定分组的名字    
107                     -->
108                     <optgroup label="女明星">
109                         <!-- 在下拉列表中使用option标签来创建一个一个列表项 -->
110                         <option value="fbb">范冰冰</option>
111                         <option value="lxr">林心如</option>
112                         <option value="zw">赵薇</option>
113                     </optgroup>
114                     
115                     <optgroup label="男明星">
116                         <option value="zbs" selected="selected">赵本山</option>
117                         <option value="ldh">刘德华</option>
118                         <option value="pcj">潘长江</option>
119                     </optgroup>
120                     
121                 </select>
122             
123             <br /><br />
124             
125             <!--
126                 使用textarea创建一个文本域
127             -->
128             自我介绍  <textarea name="info"></textarea>
129             
130             <br /><br />
131             
132             <!-- 
133                 提交按钮可以将表单中的信息提交给服务器
134                 使用input创建一个提交按钮,它的type属性值是submit
135                 在提交按钮中可以通过value属性来指定按钮上的文字
136             -->
137             <input type="submit" value="注册" />
138             
139             <!--
140                 <input type="reset" />可以创建一个重置按钮,
141                     点击重置按钮以后表单中内容将会恢复为默认值
142             -->
143             <input type="reset" />
144             
145             <!-- 
146                 使用input type=button可以用来创建一个单纯的按钮,
147                     这个按钮没有任何功能,只能被点击
148             -->
149             <input type="button" value="按钮" />
150             
151             <!--
152                 除了使用input,也可以使用button标签来创建按钮
153                 这种方式和使用input类似,只不过由于它是成对出现的标签
154                     使用起来更加的灵活
155             -->
156             <br /><br />
157             <button type="submit">提交</button>
158             <button type="reset">重置</button>
159             <button type="button">按钮</button>
160             
161         </form>
162     </body>
163 </html>

 

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><!-- 表单的作用就是用来将用户信息提交给服务器的比如:百度的搜索框 注册 登录这些操作都需要填写表单--><!--使用form标签创建一个表单form标签中必须指定一个action属性,该属性指向的是一个服务器的地址当我们提交表单时将会提交到action属性对应的地址--><form action="target.html"><!-- 使用form创建的仅仅是一个空白的表单,我们还需要向form中添加不同的表单项--><!-- 在表单中可以使用fieldset来为表单项进行分组,可以将表单项中的同一组放到一个fieldset中--><fieldset><!-- 在fieldset可以使用legend子标签,来指定组名 --><legend>用户信息</legend><!-- 使用input来创建一个文本框,它的type属性是text如果希望表单项中的数据会提交到服务器中,还必须给表单项指定一个name属性name表示提交内容的名字用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器url地址?查询字符串格式:属性名=属性值&属性名=属性值&属性名=属性值&属性名=属性值在文本框中也可以指定value属性值,该值将会作为文本框的默认值显示--><!-- 在html中还为我们提供了一个标签,专门用来选中表单中的提示文字的label标签该标签可以指定一个for属性,该属性的值需要指定一个表单项的id值--><label for="um">用户名</label><input id="um" type="text" name="username"  /> <br /><br /><!--密码框- 使用input创建一个密码框,它的type属性值是password--><label for="pwd">密码 </label><input id="pwd" type="password" name="password" /> <br /><br /></fieldset><fieldset ><legend>用户爱好</legend><!--单选按钮- 使用input来创建一个单选按钮,它的type属性使用radio- 单选按钮通过name属性进行分组,name属性相同是一组按钮- 像这种需要用户选择但是不需要用户直接填写内容的表单项,还必须指定一个value属性,这样被选中的表单项的value属性值将会最终提交给服务器如果希望在单选按钮或者是多选框中指定默认选中的选项,则可以在希望选中的项中添加checked="checked"属性-->性别  <input type="radio" name="gender" value="male" id="male" /><label for="male">男</label><input type="radio" name="gender" value="female" checked="checked" id="female" /><label for="female">女</label> <br /><br /><!-- 多选框- 使用input创建一个多选框,它的type属性使用checkbox-->爱好<input type="checkbox" name="hobby" value="zq" />足球<input type="checkbox" name="hobby" value="lq" />篮球<input type="checkbox" name="hobby" value="ymq" checked="checked" />羽毛球<input type="checkbox" name="hobby" value="ppq" checked="checked"/>乒乓球<br /><br /></fieldset><!-- 下拉列表- 使用select来创建一个下拉列表下拉列表的name属性需要指定给select,而value属性需要指定给option可以通过在option中添加selected="selected"来将选项设置为默认选中当为select添加一个multiple="multiple",则下拉列表变为一个多选的下拉列表-->你喜欢的明星 <select name="star"><!-- 在select中可以使用optgroup对选项进行分组同一个optgroup中的选项是一组可以通过label属性来指定分组的名字--><optgroup label="女明星"><!-- 在下拉列表中使用option标签来创建一个一个列表项 --><option value="fbb">范冰冰</option><option value="lxr">林心如</option><option value="zw">赵薇</option></optgroup><optgroup label="男明星"><option value="zbs" selected="selected">赵本山</option><option value="ldh">刘德华</option><option value="pcj">潘长江</option></optgroup></select><br /><br /><!--使用textarea创建一个文本域-->自我介绍  <textarea name="info"></textarea><br /><br /><!-- 提交按钮可以将表单中的信息提交给服务器使用input创建一个提交按钮,它的type属性值是submit在提交按钮中可以通过value属性来指定按钮上的文字--><input type="submit" value="注册" /><!--<input type="reset" />可以创建一个重置按钮,点击重置按钮以后表单中内容将会恢复为默认值--><input type="reset" /><!-- 使用input type=button可以用来创建一个单纯的按钮,这个按钮没有任何功能,只能被点击--><input type="button" value="按钮" /><!--除了使用input,也可以使用button标签来创建按钮这种方式和使用input类似,只不过由于它是成对出现的标签使用起来更加的灵活--><br /><br /><button type="submit">提交</button><button type="reset">重置</button><button type="button">按钮</button></form></body></html>

 

转载于:https://www.cnblogs.com/fuck1/p/7470809.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/487665.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

云联惠身份认证需要多长时间_欧盟REACH认证需要多长时间【周期、费用、有效期】...

一、欧盟reach认证REACH是欧盟关于化学品注册&#xff0c;评估&#xff0c;授权和限制的法规&#xff0c;它于2007年6月1日生效&#xff0c;并用一个系统取代了许多欧洲指令和法规。二、申请REACH认证需要多长时间一般情况下&#xff0c;申请REACH认证需要5个工作日&#xff0c…

Nature Neuroscience|群际冲突的脑间同步机制

本文来源&#xff1a;”认知神经科学与学习国家重点实验室”官网编辑&#xff1a;Yezi审阅&#xff1a;mingzlee7马燚娜课题组在《Nature Neuroscience》发表论文揭示群际冲突的脑间同步机制图片来源&#xff1a;《乌合之众——大众心理研究》插图个人一旦成为群体的一员&#…

计算机叫醒服务英语,关于酒店叫醒服务的英文口语

关于酒店叫醒服务的英文口语发布时间&#xff1a;2020-03-08春困秋乏夏打盹&#xff0c;睡不醒的冬三月……起床困难户小学妹今天要和大家聊聊使用酒店叫醒服务时会用到的实用口语。叫醒服务通常会用Morning call Service或是Wake-up call来表示&#xff0c;如果第二天有重要的…

一些常用的meta标签及其作用

声明文档使用的字符编码 <meta charsetutf-8>优先使用 IE 最新版本和 Chrome <meta http-equiv"X-UA-Compatible" content"IEedge,chrome1"/><meta name"wap-font-scale" content"no"> 页面描述 <meta name&q…

scala语言的底层是java实现的_2020了,每个程序员都该学习的 5 种开发语言

我曾在某处读到过&#xff08;可能在《代码大全》&#xff0c;但我不敢确定&#xff09;&#xff0c;程序员应该每年学习一门新的编程语言。但如果做不到&#xff0c;我建议&#xff0c;你至少学习以下 5 种开发语言&#xff0c;以便你在职业生涯有很好的表现。每个公司都喜爱精…

热议:大脑功能磁共振数据不可靠?杜克大学教授对自己15年的工作提出质疑...

来源&#xff1a;brainnews作者&#xff1a;brainnew创作团队杜克大学的研究人员对功能磁共振数据进行了重新测评&#xff0c;对自己15年的工作提出了质疑。脑部图像显示了不同的两天完成3个任务所对应的功能磁共振成像。图中&#xff0c;暖色显示一组人激活级别的一致性&#…

使用BUCK进行iOS项目打包

关于BUCK BUCK是Facebook开源的快速打包工具&#xff0c;可以用于多种语言及平台的项目打包&#xff0c;例如&#xff1a;C、C、Java、iOS、Android等等。用于大型的iOS、Android项目&#xff0c;可以显著提升打包效率。 关于BUCK介绍的一些链接如下&#xff1a; BUCK官网 What…

计算机excel表格相关考试视频,1189.5天通过职称计算机考试:Excel 2003中文电子表格(考点视频串讲+全真模拟).pdf...

<<5天通过职称计算机考试&#xff1a;Excel 2003中文电子表格(考点视频串讲&#xff0b;全真模拟)>>猛点这里下载全部内容目录&#xff1a;第1章 Excel应用基础考点1 Excel的启动与退出1&#xff0e;考点分析2&#xff0e;经典试题考点2 熟悉Excel窗口的操作1&…

cvc降噪和主动降噪_1MORE 主动降噪圈铁耳机图集

1MORE在今年推出了一款主动降噪耳机&#xff0c;这款耳机定价虽然稍高达到1299元&#xff0c;不过它还是相比其他主流价位的主动降噪耳机有很多的不同点。1MORE主动降噪耳机使用的似乎是高通蓝牙SoC的方案&#xff0c;使用了动铁动圈的扬声器组合。支持前馈反馈的双Mic主动降噪…

北师大计算机试题五答案,北京师范大学计算机软件及理论2022考研招生分析、参考书、真题等复习指导解析...

原标题&#xff1a;北京师范大学计算机软件及理论2022考研招生分析、参考书、真题等复习指导解析一、院系及专业介绍北京师范大学信息学科植根于学校百年沃土&#xff0c;经过半个多世纪的发展壮大&#xff0c;现已拥有计算机科学与技术一级学科博士后科研流动站和博士学位授权…

C++primer 13.6.2节练习

练习13.49 13.50 1 #include <iostream>2 #include <string>3 #include <utility>4 #include <memory>5 #include <algorithm>6 #include <vector>7 8 using namespace std;9 10 class String {11 friend ostream &print(ostream …

北约科技组织展望未来20年军事新兴与颠覆性技术趋势

来源&#xff1a;创新研究2020年5月4日&#xff0c;北约科技组织&#xff08;NATO Science & Technology Organization&#xff09;发布《科技趋势&#xff1a;2020-2040》&#xff08;Science & Technology Trends 2020-2040&#xff09;&#xff0c;分析评估未来20年…

feign 整合sentinel_SpringCloud实战五-Sentinel上

场景微服务会划分出多个模块&#xff0c;模块之间的调用频率可能比较高&#xff0c;这时可能会存在服务雪崩&#xff08;一个服务失败&#xff0c;导致整条链路的服务都失败的情形&#xff09;的&#xff0c;如图&#xff1a;随着时间的推移&#xff0c;从刚开始的C不可用变成了…

计算机院校人气排名,2019高校人气排行榜_最具人气大学排行榜7月榜单发布 清华大学排第一...

最具人气大学排行榜7月榜单发布 清华大学排第一JPG&#xff0c;395x289&#xff0c;231KB&#xff0c;342_249大学人气排行榜 你的大学上榜了吗JPG&#xff0c;392x290&#xff0c;231KB&#xff0c;337_250大学人气排行榜 你的大学上榜了吗JPG&#xff0c;596x447&#xff0c;…

170905-MyBatis中的关系映射

关系映射 参考文档复习&#xff1a;1对1&#xff0c;1对多&#xff0c;多对多 1.映射(多)对一、(一)对一的关联关系 1).使用列的别名 ①.若不关联数据表&#xff0c;则可以得到关联对象的id属性 ②.若还希望得到关联对象的其它属性。则必须关联其它的数据表 …

【AI-CPS】【工业互联网】从观望到行动:全球工业物联网市场生态全景观察

以下文章来源于资本实验室 &#xff0c;作者齐达在当前&#xff0c;诸如5G&#xff0c;物联网、边缘计算、人工智能、机器人、区块链、增材制造和虚拟现实/增强现实等技术正在加速融合到工业物联网&#xff08;Industrial Internet of Things&#xff0c;IIoT&#xff09;的肥沃…

光华科技光刻胶_光刻胶领衔国产替代,20只相关优质个股曝光,快看看有没有你的...

光刻胶(3.78%)领涨股&#xff1a;扬帆新材&#xff08;300637&#xff09;&#xff0c;上涨家数&#xff1a;20&#xff0c;下跌家数&#xff1a;4&#xff0c;涨停家数&#xff1a;320只光刻胶概念优质股20只光刻胶优质股&#xff0c;按涨跌幅大小排序&#xff0c;分别为&…

17福师《计算机应用基础,福师17春秋学期《计算机应用基础》在线在线作业一.doc...

一、单选题(共40道试题&#xff0c;共80分。)V1.Windows98桌面上&#xff0c;不能打开"我的电脑"的操作是&#xff1a;A.在"资源管理器"中选取"我的电脑"B.用鼠标左键双击"我的电脑"图标C.先用鼠标右键双击"我的电脑"图标&a…

考虑玩家移动速度的射击

E4自带第一人称射击模板中的射击在玩家移速较慢的情况下没有明显问题&#xff0c;但如果玩家在高速移动时候&#xff08;例如骑摩托车或者开车&#xff09;&#xff0c;就会发现子弹的速度很奇怪&#xff0c;没有考虑到玩家本身的移动速度&#xff0c;因此本身也是不符合物理规…

荐读:五月最值得阅读的15篇人工智能文章

本文经授权转载自学术头条&#xff08; ID: SciTouTiao&#xff09;&#xff0c;转载请联系出处来源&#xff1a;学术头条作者&#xff1a;吴婷婷在过去一个月中&#xff0c;15篇最值得阅读的AI文章&#xff08;附链接&#xff09;&#xff1a;1、沃森的创造者想教人工智能一个…