创新互联HTML教程：HTML表单和输入

HTML 表单和输入

HTML 表单用于收集不同类型的用户输入。

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了鼓楼免费建站欢迎大家使用！

在线实例

创建文本字段 (Text field)
本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。

创建密码字段
本例演示如何创建 HTML 的密码域。

（在本页底端可以找到更多实例。）

HTML 表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容，比如：文本域 (textarea)、下拉列表、单选框 (radio-buttons)、复选框 (checkboxes)等等。

表单使用表单标签

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签（）。元素是最重要的表单元素。

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域（Text Fields）

文本域通过标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。您可以在编程测试中创建文本输入框！

实例

尝试一下 »

浏览器显示如下：

姓名:

电话号码:

注意:表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是 20 个字符。

密码字段

密码字段通过标签来定义:

实例

尝试一下 »

浏览器显示效果如下:

密码:

注意:密码字段字符不会明文显示，而是以星号或圆点替代。

单选按钮（Radio Buttons）

标签定义了表单单选框选项。在编程测试中练习使用单选按钮！

实例

尝试一下 »

浏览器显示效果如下:

男

女

复选框（Checkboxes）

定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。在实战测试中学习使用复选框！

实例

尝试一下 »

浏览器显示效果如下:

我有自行车

我有小车

提交按钮 (Submit Button)

定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

实例

Username:

尝试一下 »

浏览器显示截图效果如下:

假如您在文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。

表单实例

带边框的表单
本例演示如何在数据周围绘制一个带标题的框。

带有输入框和确认按钮的表单
本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。

带有复选框的表单
此表单包含两个复选框和一个确认按钮。

带有单选按钮的表单
此表单包含两个单选框和一个确认按钮。

从表单发送电子邮件
此例演示如何从表单发送电子邮件。

HTML 表单标签

New : HTML5 新标签

标签	描述
	定义供用户输入的表单
	定义输入域
</td><td style="text-align: center">定义文本域 (一个多行的输入控件)</td></tr><tr><td style="text-align: center"><label> </td><td style="text-align: center">定义了 <input> 元素的标签，一般为输入标题</td></tr><tr><td style="text-align: center"><fieldset> </td><td style="text-align: center">定义了一组相关的表单元素，并使用外框包含起来</td></tr><tr><td style="text-align: center"><legend> </td><td style="text-align: center">定义了 <fieldset> 元素的标题</td></tr><tr><td style="text-align: center"><select> </td><td style="text-align: center">定义了下拉选项列表</td></tr><tr><td style="text-align: center"><optgroup> </td><td style="text-align: center">定义选项组</td></tr><tr><td style="text-align: center"><option> </td><td style="text-align: center">定义下拉列表中的选项</td></tr><tr><td style="text-align: center"><button> </td><td style="text-align: center">定义一个点击按钮</td></tr><tr><td> <datalist> New </td><td style="text-align: center">指定一个预先定义的输入控件选项列表</td></tr><tr><td> <keygen> New </td><td style="text-align: center">定义了表单的密钥对生成器字段</td></tr><tr><td> <output> New </td><td style="text-align: center">定义一个计算结果</td></tr></tbody></table><p> </p> <p> 本文题目：<a href="http://www.csdahua.cn/qtweb/news40/405090.html">创新互联HTML教程：HTML表单和输入</a> <br> 文章转载：<a href="http://www.csdahua.cn/qtweb/news40/405090.html">http://www.csdahua.cn/qtweb/news40/405090.html</a> </p> <p> 网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等 </p> <p class="adpic"> <a href="https://www.cdcxhl.com/service/ad.html" target="_blank" class="ad">广告</a> <a href="" target="_blank" class="adimg"><img src=""></a> </p> <p class="copy"> 声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： <a href="http://www.csdahua.cn/" target="_blank">快上网</a> </p> </div> <div class="newsmorelb"> <p>成都快上网为您推荐相关内容</p> <ul> <li> <a href="/qtweb/news39/405089.html">莱卡q</a> </li><li> <a href="/qtweb/news38/405088.html">工业机器人用什么语言编程的？</a> </li><li> <a href="/qtweb/news37/405087.html">bazel和cmake的区别？（windows下cmake）</a> </li><li> <a href="/qtweb/news36/405086.html">Linux下如何轻松下载SVN文件？(linux怎么下载svn文件)</a> </li><li> <a href="/qtweb/news35/405085.html">新手学seo</a> </li><li> <a href="/qtweb/news34/405084.html">创新互联jAVA教程：JavaScript原型链的理解</a> </li><li> <a href="/qtweb/news33/405083.html">云虚拟主机的特点是什么呢</a> </li><li> <a href="/qtweb/news32/405082.html">图形编辑器开发：模块间如何通信？</a> </li><li> <a href="/qtweb/news31/405081.html">服务器在美国可以用中国的域名吗？（服务器在美国可以用中国的域名吗）</a> </li> </ul> </div> </div> <div class="col-lg-3 noneb"> <div class="bkright" style="margin-top: 0"> <p><a href="https://www.cdcxhl.com/news/qiyejianzhan/">企业建站知识</a></p> <ul> <li> <a class="text_overflow" href="/qtweb/news46/134446.html">服务器租赁平台有哪些？便宜服务器租用网站</a> </li><li> <a class="text_overflow" href="/qtweb/news10/514860.html">免实名海外服务器租用要有哪些需要注意的</a> </li><li> <a class="text_overflow" href="/qtweb/news30/262430.html">制作一张网页要多久?（制作一张网页要多久完成)</a> </li><li> <a class="text_overflow" href="/qtweb/news47/56497.html">为什么说加我却没加我</a> </li><li> <a class="text_overflow" href="/qtweb/news27/76227.html">网络接入服务商怎么查？(如何查网络服务商)</a> </li><li> <a class="text_overflow" href="/qtweb/news46/248546.html">跨站脚本攻击XSS挑战Web安全</a> </li><li> <a class="text_overflow" href="/qtweb/news5/1655.html">GitHub将替换掉master等术语，网友：把我项目都搞崩啦</a> </li><li> <a class="text_overflow" href="/qtweb/news41/390941.html">纽约信贷联盟前雇员40分钟内报复性销毁2万份文件，多达21GB</a> </li><li> <a class="text_overflow" href="/qtweb/news20/47870.html">云计算中无法使用关系型数据库？</a> </li><li> <a class="text_overflow" href="/qtweb/news27/446827.html">15个跨平台的VSCode插件</a> </li><li> <a class="text_overflow" href="/qtweb/news24/96124.html">如何用html5绘制圆形图片</a> </li><li> <a class="text_overflow" href="/qtweb/news0/228250.html">CentOS7查看系统版本及查看机器位数x86-64</a> </li><li> <a class="text_overflow" href="/qtweb/news7/67457.html">自建站如何搭建？(成品建站怎么安装模块的)</a> </li><li> <a class="text_overflow" href="/qtweb/news41/306241.html">ppt目录去掉了怎么找回来？（刚刚不小心把根目录删除了）</a> </li><li> <a class="text_overflow" href="/qtweb/news39/330139.html">mysql面试必问的十种问题？（以上问题只是MySQL数据库相关的一小部分，希望能帮助你更好地了解和使用MySQL数据库。如果有其他问题，请随时提问！）</a> </li> </ul> </div> <div class="bkright tag"> <p><a href="https://www.cdcxhl.com/hangye/" target="_blank">行业网站建设</a></p> <ul> <li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/huisuosj/" target="_blank">会所设计</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/blgds/" target="_blank">玻璃钢雕塑</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/mutuopan/" target="_blank">木托盘</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/fadianjihs/" target="_blank">发电机回收</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/bangongkongjian/" target="_blank">办公空间设计</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/sljbc/" target="_blank">生料搅拌车</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/jiudiansj/" target="_blank">酒店设计</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/shayanfudiao/" target="_blank">砂岩浮雕</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/hldzj/" target="_blank">护栏打桩机</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/vr/" target="_blank">VR全景</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/xuanchuanpian/" target="_blank">宣传片制作</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/huaxiang/" target="_blank">花箱</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/ggzz/" target="_blank">广告制作</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/bdfhw/" target="_blank">被动防护网</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/hwxxy/" target="_blank">户外休闲椅</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/jszz/" target="_blank">假山制作</a> </li> </ul> </div> </div> </div> <div class="carousel-inner linkbg" style="background: #fff"> <div class="container"> <a href="http://www.xhgfhy.com/ " target="_blank">成都防护栏</a>　　　<a href="http://www.kswsj.com/" target="_blank">成都制作网站</a>　　　<a href="http://www.scqtclxh.com/" target="_blank">成都火锅桌椅</a>　　　<a href="http://www.djyfdjwx.com/" target="_blank">四川威斯达宇</a>　　　<a href="http://www.gtmaxf.com/" target="_blank">四川国泰民安消防</a>　　　<a href="http://www.cdhuace.com/vi.html" target="_blank">vi形象设计</a>　　　<a href="http://www.nengjingkeji.cn/" target="_blank">成都能净科技</a>　　　<a href="http://www.fzwuji.cn/" target="_blank">成都婚庆策划</a>　　　<a href="http://www.msfdjwx.com/" target="_blank">眉山发电机维修</a>　　　<a href="http://www.cxhljz.cn/web/" target="_blank">企业官网建设</a>　　　<a href="http://m.cdxwcx.com/seo.html" target="_blank">成都网站推广公司</a>　　　<a href="http://www.cqcxhl.com/miniprogram/" target="_blank">微信小程序开发</a>　　　<a href="http://www.scluxian.com/" target="_blank">泸县网站建设</a>　　　<a href="http://www.njjike.cn/" target="_blank">成都办公窗帘</a>　　　<a href="http://www.xhgfhy.com/ " target="_blank">不锈钢防护栏</a>　　　<a href="http://chengdu.cdcxhl.com/weixin/" target="_blank">微信公众号开发</a>　　　<a href="http://www.cdxwcx.cn/tuoguan/nanchong.html" target="_blank">南充机房托管</a>　　　<a href="http://www.cxjianzhan.com/seo/" target="_blank">seo关键词优化</a>　　　<a href="http://www.njzdgg.com/" target="_blank">支点广告</a>　　　<a href="http://www.pwwzsj.com/" target="_blank">平武做网站</a>　　　 </div> </div> <footer> <div class="carousel-inner footjz"> <div class="container"> <i class="icon iconfont zbw"></i> 高品质定制 <i class="icon iconfont"></i> 跨终端自动兼容 <i class="icon iconfont"></i> 节约开发成本 <i class="icon iconfont"></i> 开发周期短 <i class="icon iconfont"></i> 一体化服务 <button type="button" class="btn btn-default btn-lg" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 立即开始2800定制网站建设</button> <button type="button" class="btn btn-default btn-xs" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 2800定制网站建设</button> </div> </div> <div class="carousel-inner bqsy"> <div class="container"> <div class="lxfs"> <h4 class="yutelnone">028-86922220 13518219792</h4> <h4 class="yutelblock"><a href="tel:02886922220">028-86922220</a> <a href="tel:13518219792">13518219792</a></h4> <a class="btn btn-default" href="tencent://message/?uin=532337155&Site=&Menu=yes" role="button">网站建设<span>QQ</span>：532337155</a> <a class="btn btn-default" href="tencent://message/?uin=631063699&Site=&Menu=yes" role="button">营销推广<span>QQ</span>：631063699</a> <a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=532337155&version=1&src_type=web&web_src=oicqzone.com" role="button">网站制作<span>QQ</span>：532337155</a> <a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=631063699&version=1&src_type=web&web_src=oicqzone.com" role="button">营销推广<span>QQ</span>：631063699</a> <a class="btn btn-default nonea" href="tencent://message/?uin=1683211881&Site=&Menu=yes" role="button">售后QQ：1683211881</a> <div class="dz">成都快上网专注： <a href="http://www.csdahua.cn/" target="_blank">网站优化</a> <a href="http://www.csdahua.cn/" target="_blank">网络推广</a> <a href="http://www.csdahua.cn/" target="_blank">网站建设</a> <address>地址：成都太升南路288号锦天国际A幢10楼</address> </div> </div> <div class="bzdh dz"><img src="https://www.cdcxhl.com/imges/bottom_logo.png" alt="创新互联"> <p><a href="https://www.cdcxhl.com/menu.html" target="_blank">成都创新互联科技有限公司</a><br> Tel：028-86922220（7x24h）</p></div> </div> </div> </footer> </body> </html> <script> $.getJSON ("../../qtwebpic.txt", function (data) { var jsonContent = { "featured":data } var random = jsonContent.featured[Math.floor(Math.random() * jsonContent.featured.length)]; $(".adpic .adimg").attr("href",random.link) $(".adpic img").attr("src",random.pic); }) </script>