网页制作-表单元素

Posted navyyouth

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网页制作-表单元素相关的知识,希望对你有一定的参考价值。

form表单是双标记有开始和结束,<form></form>表单的属性有name它的值是表单的名字  method它是表单的提交形式 action它的值是负责处理的服务端

例如:当method的值是get时,提交的编码内容会显示,但是有长度限制(相对来说不安全)

<form name="实例" method="get" action="aa.html"><input type="submit" name="shili"/></form>

在浏览器中显示的网址是提交以后

当method的值是post时,提交的编码内容不显示没有长度限制

<form name="实例" method="post" action="aa.html"><input type="submit" name="shili"/></form>

在浏览器中显示的网址提交以后

1、文本输入 必须有name  可以没有value 在网页中显示的网址上name=value

a.文本框

  <form name="实例" method="post" action="aa.html">
          <input type="text" name="shili"value="博客"/ >
      </form>

浏览器显示

b.密码框

 <form name="实例" method="post" action="aa.html">
          <input type="password" name="mima" value="123"/>
      </form>

浏览器显示

c.隐藏域(在浏览器中不显示,但是提交的时候会继续提交)

      <form name="实例" method="post" action="aa.html">
          <input type="hidden" name="yincang"value="隐藏"/ >
      </form>

d.文本域(同样有value值,只是不同于input的value值,它的value值是写在两个双标记中间的

      <form name="实例" method="post" action="aa.html">
         <textarea name="wenbenyu">这是文本域</textarea>
      </form>

前端显示可大可小,比如写评论等

文本舒服的属性除了上面说的,还有一个placeholder它是提示你这个文本框要输入什么内容的

例如

      <form name="实例" method="post" action="aa.html">
          <input type="password" name="mima"  placeholder="密码"/>
      </form>

 

前段显示

2、按钮

a.提交按钮,点击后转到form中action的值中的网址

      <form name="实例" method="get" action="aa.html">
          <input type="submit" name="tijiao"  value="提交"/>
      </form>

提交按钮是用来给后台提交输入内容进行后台处理的

b.充值按钮

      <form name="实例" method="get" action="aa.html">
          <input type="reset" name="chongzhi"  value="重置"/>
      </form>

重置按钮是用来重置输入内容的

c.普通按钮

      <form name="实例" method="get" action="aa.html">
          <input type="button" name="普通"  value="百度一下"/>
      </form>

比如百度,搜孤,谷歌等搜索用

d.图片按钮

      <form name="实例" method="get" action="aa.html">
          <input type="image" src="新建文件夹 (2)/shouye/images/lx1.png" name="T"  value="图片"/>
      </form

用图片来做按钮用

以上是关于网页制作-表单元素的主要内容,如果未能解决你的问题,请参考以下文章

HTML网页制作:插入表单

炫酷 CSS 背景效果的 10 个代码片段

十个html5代码片段,超实用,一定要收藏

网页制作-表单元素

如何在 Android Material Stepper 中验证表单?

收藏|分享前端开发常用代码片段