网页制作-表单元素

Posted 2020-10-09 navyyouth

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

用图片来做按钮用