HTML表单(下)

接下来我们使用w3c的服务器接收页面来看看中name属性的作用：

运行结果：

服务器接收页面就会把name的值指向你页面输入的数据：

所以name属性是用来给服务器识别你输入的数据的

如果把formmethod的值设置为post的话，提交的数据就不会显示出来，示例：

运行结果：

formmethod设置为post后，服务器接收页面就不会显示数据，数据被隐藏了：

value属性在单选框中的应用示例：

运行结果：

服务器就会把name值指向value值：

在复选框应用也是一样的：

运行结果：

服务器接收页面：

表单组件之< /select>列表框和下拉框

select主要是用来实现下拉框和列表框效果的，也是使用option来填充数据，我们先来实现一个下拉框，示例：

这个下拉框和在input中使用datalist标签和list属性实现的下拉框不太一样，运行结果：

在option中可以使用selected属性来默认选择一个数据，示例：

运行结果：

使用size属性来实现列表框，size的值是一个数量，表示显示多少个option的数据，示例：

运行结果：

声明multiple属性可以实现多选，在页面里按住Ctrl键然后用鼠标进行点击就能多选，示例：

运行结果：

服务器接收页面：

表单组件之< /textarea>多行文本框</p><p>textarea就只是用来做一个多行文本框，这个标签常用的属性就是rows和cols，前者用来控制行数后者用来控制列数，cols是按字符为单位的。不过除了IE内核的浏览器不能用鼠标拉动大小外，其他的浏览器是可以支持用鼠标拉动文本框的大小的。</p><p>示例：</p><p><img src="/upload/otherpic52/211596.com" alt="HTML表单(下)"></p><p>运行结果：</p><p><img src="/upload/otherpic52/211598.com" alt="HTML表单(下)"></p><p>可以拉动：</p><p><img src="/upload/otherpic52/211600.com" alt="HTML表单(下)"></p><p>服务器接收页面：</p><p><img src="/upload/otherpic52/211602.com" alt="HTML表单(下)"></p><p>表单组件之<button>< /button>按钮</p><p>可能有些人会疑问，为什么input已经有button了，还要额外再弄一个button标签呢？这是因为button作为标签的话，就能嵌套其他标签，例如<font>、<p>、<pre>等等，能够实现更多的效果，例如我可以在button标签嵌套一个img放上一张图片。</p><p>在input里则只能用type属性来引入button组件，所以有很多的限制，顶多只能在文字上做一些效果，并且在爬取数据的时候还得需要判断一下type里面的值是否是button，如果是使用button标签的话直接找标签就可以了。</p><p>button标签类型默认是submit按钮，如果要指定其他类型的按钮就使用type属性来指定，示例：</p><p><img src="/upload/otherpic52/211604.com" alt="HTML表单(下)"></p><p>运行结果：</p><p><img src="/upload/otherpic52/211605.com" alt="HTML表单(下)"></p><p>同样的button标签也支持formaction、formmethod、formtarget等属性，示例：</p><p><img src="/upload/otherpic52/211608.com" alt="HTML表单(下)"></p><p>运行结果：</p><p><img src="/upload/otherpic52/211610.com" alt="HTML表单(下)"></p><p>服务器接收页面：</p><p><img src="/upload/otherpic52/211613.com" alt="HTML表单(下)"></p><p>给按钮添加图片示例：</p><p><img src="/upload/otherpic52/211616.com" alt="HTML表单(下)"></p><p>运行结果：</p><p><img src="/upload/otherpic52/211619.com" alt="HTML表单(下)"></p> <br> 文章名称：HTML表单(下) <br> 网站路径：<a href="http://shouzuofang.com/article/geodio.html">http://shouzuofang.com/article/geodio.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/eddgh.html">LNMP-Nginx部署（适合新人）-创新互联</a> </li><li> <a href="/article/edojd.html">如何进行C++智能指针的实现-创新互联</a> </li><li> <a href="/article/edcie.html">SQLSERVER中各类触发器的完整语法及参数是什么-创新互联</a> </li><li> <a href="/article/edced.html">linux命令——cp-创新互联</a> </li><li> <a href="/article/edojj.html">Web应用系统的性能如何提高-创新互联</a> </li> </ul> </div> </div> <footer> <div class="message"> <div class="mess container"> <p>免费获取网站建设与品牌策划方案报价</p> <span>*主要业务范围包括：高端网站建设， 集团网站建设(网站建设网站制作)找网站建设公司就上四川攀枝花网站建设。</span> <form action=""> <input type="text" class="ipt1" placeholder="联系人"> <input type="text" class="ipt2" placeholder="联系电话"> <textarea name="" id="" placeholder="内容描述：描述您的需求，如网站、微信、电商、APP等。"> 提交需求

联系我们

028-86922220
• 手机：13518219792
• 地址：成都市太升南路288号锦天国际A幢1002号
• 24小时服务热线：400-028-6601

网站建设服务

• 网页设计
• 网站制作
• 网站开发

网站推广服务

• 营销网站建设
• 百度快速排名
• 整站网站推广

网站运维服务

• 基础维护
• 网站改版
• 网站维护

FOLLOW US

• 

  微信二维码

  

  微信二维码

友情链接： 蜜朵婚庆   成都展柜设计   成都画册制作   德阳机房托管   网站免费收录   美美搬家   固迪佳新材料   重庆水土双线托管   重庆电商网站建设   工程造价   

Copyright © 2022 四川攀枝花网站建设公司 四川攀枝花网站建设公司-选我们！四川专业的攀枝花网站制作公司！

All Rights Reserved 版权所有 蜀ICP备2024105912号-3