HTML-标签-表单标签概述

表单：

　　概念：用于采集用户输入的数据，用于和服务器进行交互（如：QQ）

　　form：用于定义表单的,可以定义一个范围，范围代表了采集用户数据的范围
　　　　属性：
　　　　　　action:指定提交数据的URL（用于提价的路径）
　　　　　　method:指定提交方式
　　　　分类：一共有7种,2种比较常用
　　　　　　get:
　　　　　　　　1.请求参数会在地址栏中显示,会封装在请求行中(HTTP协议后讲解)
　　　　　　　　2.请求参数大小是限制的
　　　　　　　　3.不太安全
　　　　　　post:
　　　　　　　　1.请求参数不会再地址中显示,会封装在请求体中(HTTP协议后讲解)
　　　　　　　　2.请求参数的大小没有限制
　　　　　　　　3.较为安全
　　　　表单项中的数据要想被提价：必须指定其name属性

<form action="#" method="post">
    用户名：<input name="username"><br>
    密码：<input name="password"><br>
    <input type="submit" value="提交"><!--提交按钮-->

 

 

HTML标签-表单标签-表单项input1

 表单项标签：

  • input：默认文本框 可以通过type属性值，改变元素展示的样式
    • type属性：
      • text：文本输入框，默认值
        • placeholder：指定输入框的提示信息，当输入框的内容发送变化，会自动清空提示信息
      • password：密码输入框
      • radio：单元框
        • 注意：

　　　　　　　　　　　　1.要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样

　　　　　　　　　　　　2.一般会给每一个单选框提供value属性，指定其被选中后提交的值

　　　　　　　　　　　　3.checked属性，可以指定默认值 

      • checkbox：复选框 
        • 注意：

　　　　　　　　　　　　1.一般会给每一个单选框提供value属性，指定其被选中后提交的值

　　　　　　　　　　　　2.checked属性，可以指定默认值 

      • file：文件选择框 
      • hidden：隐藏域，用于提交一些信息
      • 按钮：
        • submit：提交按钮，可以表单
        • button：普通一个按钮
        • image：图片提交按钮
          • src属性指定图片的路径　　　　　　　　

 

      • label：指定输入项的文字描述信息
        • 注意：
          • label的for属性一般会和 input 的 id 属性值 对应，则点击label区域，会让input输入框获取焦点
  • select：下拉列表（如：多选爱好…）
  • textarea：文本域（如：自我介绍…）
    <!--
        表单属性
    -->
<form action="#" method="get">
    <!--指定输入项的文字描述信息 label-->
    <label for="username">账号</label>：<input type="text" name="username" placeholder="请输入用户名" id="username"><br>
    <label for="password">密码</label>：<input type="password" name="password" placeholder="请输入密码" id="password"><br>
    <!--单选框-->
    性别：<input type="radio" name="gender" value="男">男
         <input type="radio" name="gender" value="女">女<br>
    <!--复选框-->
    爱好：<input type="checkbox" name="hobby" value="睡觉"> 睡觉
    <input type="checkbox" name="hobby" value="睡觉"> 睡觉
    <input type="checkbox" name="hobby" value="睡觉"> 睡觉 <br>
    <!--图片选择框 file-->
    图片：<input type="file" name="file"><br>
    <!--隐藏域框 hidden-->
    隐藏域：<input type="hidden" name="hidden" value="aaa"><br>
    <!--取色器 color-->
    取色器：<input type="color" name="color"><br>
    <!--日期 date-->
    生日：<input type="date" name="date"><br>
    <!--具体日期 datetime-local-->
    生日具体时间：<input type="datetime-local" name="datetime"><br>
    <!--邮箱 email-->
    邮箱：<input type="email" name="email"><br>
    年龄：<input type="number" name="number"><br>

    <!--提交按钮 submit-->
    <input type="submit" value="提价">
    <!--普通按钮 button-->
    <input type="button" value="一个按钮"><br>
    <!--图片提交 image-->
    <input type="image" src="image1/regbtn.jpg">
</form>

运行结果：

 

原文地址：http://www.cnblogs.com/qihaokuan/p/16824727.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性