游客您好
第三方账号登陆
  • 点击联系客服

    在线时间:8:00-16:00

    客服电话

    020-85534346

    电子邮件

    81058337@qq.com
  • 码云社APP

    随时掌握码云社动态

  • 扫描二维码

    关注砺锋微信公众号

html之表单标签

发布时期:2019-7-22 18:59
阅读:467 回复:0

1.表单标签:概念:用于采集用户输入的数据,用户服务器进行交互form标签:form/form属性:action:提交的路径地址method:提交的方式(get,post)get和post的区别:(1)get提交将数据加在地址栏的后面,post提交将数据封 ...

1.表单标签:
概念:用于采集用户输入的数据,用户服务器进行交互
form标签:<form></form>
属性:
action:提交的路径地址
method:提交的方式(get,post)
get和post的区别:
    (1)get提交将数据加在地址栏的后面,post提交将数据封装在请求体中
    (2)get提交相对不安全;post提交相对安全
    (3)get提交有大小限制,根据浏览器不同而不同;post不限制大小

2.input标签:<input />
  type属性:根据type属性实现各种不同功能的表单项;
  text:普通的文本输入框;
  name:username value="张三"设置默认值
  password:密码输入框;特点是显示的是掩码
  radio:单选按钮
  name:如果想让一组单选按钮互斥,就用指定同样的name属性值,需要加value属性值;
  checked:默认被选中;    
  checkbox:复选框;
  name:组的概念,需要加value属性值。
  checked:默认被选中;
  file:上传文件的控件
  button:普通按钮,没有任何内置的功能;
  submit:内置功能,点击会按照action地址提交
  reset:重置,点击会清空之前填写的内容
  image:图片按钮,功能类似与submit
  src:加载图片
  alt:图片的提示文字
  hidden:隐藏表单,作用是在提交数据的时候,服务器需要这个数据,但是不需要用户看到。
  注意:name属性必须要写。

 3、select标签(<select></select>):下拉菜单
  属性:
  name;表单项的名称
  option标签:可选项(下拉菜单之间的级联)
   value,表单项的值
   selected:默认被选中
  
 4、textarea:文本域标签
  属性:
   cols:列数
   rows:行数
  注意:默认的文本值在标签体当中
   
例子:
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <!--
  设计一个表单,进行用户注册
 信息有:
  账号(文本框)
 密码(密码框)
 学历:大专,本科,研究生单选
 选修科目:JAVA,PYTHON,ANDROID,C++多选
 所在学校:下拉框,北大,清华,复旦,交大,中科大
 备注:文本域,列30,20
 有图片按钮和重置按钮
  -->
 <body>
  <form name="studnet" action="#" method="get">
   <table >
    <tr>
     <td>
      账号
     </td>
     <td>
      <input type="text"  name="username" value=""/>
     </td>
    </tr>
    <tr>
     <td>
      密码
     </td>
     <td>
      <input type="password" name="pwd" value="" />
     </td>
     
    </tr>
    <tr>
     <td>
      学历
     </td>
     <td>
      <input type="radio" name="xueli" value="" />大专
      <input type="radio" name="xueli" value="" checked="checked"/>本科
      <input type="radio" name="xueli" value="" />研究生
     </td>
    </tr>
    <tr>
     <td>
      选修科目
     </td>
     <td>
      <input type="checkbox" name="kemu" value="java" />JAVA
      <input type="checkbox" name="kemu" value="PYTHON" />PYTHON
      <input type="checkbox" name="kemu" value="ANDROID" />ANDROID
      <input type="checkbox" name="kemu" value="C++" />C++
     </td>
    </tr>
    <tr>
     <td>
      所在学校
     </td>
     <td>
      <select>
       <option value="beida">北大</option>
       <option value="qinghua">清华</option>
       <option value="fudan">复旦</option>
       <option value="jiaoda">交大</option>
       <option value="guangcai">广财</option>
      </select>
     </td>
    </tr>
    <tr>
     <td>
      备注
     </td>
     <td>
      <textarea  name="beizhu" cols="30" rows="20" >this is my page!</textarea>
     </td>
    </tr>
    <tr>
     <td></td>
     
     <td>
      <input type="reset" value="重置" />
     </td>
    </tr>
    <tr>
     <td></td>
     
     <td>
      <input  type="image" src="../images/btn.gif" alt="图片提示词"/>
     </td>
    </tr>
   </table>
  </form>
 </body>
</html>




梁嗷嚎(未知职业)-本文作者
这个人很懒,什么也没有留下。
467 0 2019-7-22 18:59
本文暂无评论,快来抢沙发!

扫一扫关注官方微信号

一手信息资讯权掌握尽在码云社

滚动新闻
CODESEEDING(码云社)一家致力于程序员成长、以内容为核心、以提问为引导的多元化成长社区。我们在线上为技术爱好者提供了一个优质的交流氛围环境,在线下同样和众多高校联合开办了技术沙龙品牌。
020-85534346
关注我们
  • 访问移动H5版
  • 官方微信公众号

码云社 - CODESEEDING 2.0© 2018-2019 码云社. TOOBUG ( 粤ICP备16114193号-3 )