zoukankan      html  css  js  c++  java
  • HTML----表单标签

    ##  HTML标签:表单标签

      *  表单:

        *  概念:用于采集用户输入的数据的。用于和服务器进行交互。

        *  使用的标签:form标签

          * 属性:

             * action:指定数据提交的URL

             * method:指定提交方式

                  * 分类:一共7种
           get:
                  1、请求参数会在地址栏中显示。
                  2、请求参数长度是有限制的。
                  3、get请求不太安全

          post:
                  1、请求参数不会在地址栏中显示,会封装在请求体中(HTTP协议中详解)
                  2、请求参数的大小没有限制
                  3、post请求安全

       * 表单项中的数据要想被提交:必须指定其name属性

      * 表单项标签:
        * input:可以通过type属性,改变元素展示样式
          * type属性:
            * text:文本输入框
              * placeholder:指定输入框的提示信息,当时输入框的内容发生变化,他就会清空提示信息
            * password:密码输入框
            * radio:单选框(1、如果要想实现单选那么name属性必须唯一。2、一般会给每一个单选框提供value属性,指定其被选中后提交的值.3、checked属性可以指定默认值)
            * checkbox:复选框
    1、一般会给每一个 单选框提供value属性,指定其被选中后提交的值.2、checked属性可以指定默认值
            * flie:文件选择框
            * hidden:隐藏域,用于提交一些隐藏信息
            *按钮:
              * submit:提交按钮
              * button:按钮
              * images:图片提交按钮
                * src:指定图片路径

          *label:指定输入项的文字信息
            * 注意:label的for属性一般会和input的id属性对应,如果对应了,则点击label区域会让input输入框获取焦点。
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <!--
    form:用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围
        * 属性:
            * action:指定数据提交的URL
            * method:指定提交方式
                * 分类:一共7种
                    get:
                    post:
            * 表单项中的数据要想被提交:必须指定其name属性
    -->
    <form action="#">
        <label for="username">用户名:</label><input id="username" name="username" placeholder="请输入密码"><br>
        密码:<input name="password" placeholder="请输入密码"><br>
        性别:<input type="radio" name="sex"><input type="radio" name="sex">女
    
        爱好:<input type="checkbox" name="hobby" value="gj"> 逛街
        <input type="checkbox" name="hobby" value="yy"> 游泳
        <input type="checkbox" name="hobby" value="xx"> 学习<br>
    
        图片:<input type="file"><br>
        隐藏域:<input type="hidden" name="id" value="aaa">
    
        <input type="submit" value="登录"><br>
        <input type="image" src="../练习/images/icon_1.jpg"><br>
        拾色器:<input type="color" name="color"><br>
        日期:<input type="datetime-local" name="date1"><br>
        日期:<input type="date" name="date2"><br>
        邮箱:<input type="email" name="email"><br>
        年龄:<input type="number" name="age"><br>
    </form>
    </body>
    </html>
    
    
        * select:下拉列表
          * 子元素:option,指定列表项
        * textarea:文本域
          * cols:指定列数,每一行有多少个字符。
          * rows:默认多少行。
    案例:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录页</title>
    </head>
    <body>
    <form action="#" method="post">
        <table border="1" align="center" width="500">
            <tr>
                <td><label for="username">用户名:</label></td>
                <td><input type="text" id="username" placeholder="请输入账号"></td>
            </tr>
            <tr>
                <td><label for="password">密码:</label></td>
                <td><input type="password" id="password" placeholder="请输入密码"></td>
            </tr>
            <tr>
                <td><label for="email">Email:</label></td>
                <td><input type="email" id="email" placeholder="请输入Email"></td>
            </tr>
            <tr>
                <td><label for="realname">姓名:</label></td>
                <td><input type="text" id="realname" placeholder="请输入真实姓名"></td>
            </tr>
            <tr>
                <td><label for="tel">手机号:</label></td>
                <td><input type="text" id="tel" placeholder="请输入您的手机号"></td>
            </tr>
            <tr>
                <td><label>性别:</label></td>
                <td><input type="radio" name="sex" value="1"><input type="radio" name="sex" value="2"></td>
            </tr>
            <tr>
                <td><label>出生日期:</label></td>
                <td><input type="date" name="date"></td>
            </tr>
            <tr>
                <td><label>验证码:</label></td>
                <td><input type="text" name="yzm"><img src="images/logo.jpg"></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册"></td>
            </tr>
        </table>
    </form>
    </body>
    </html>
    
    

    效果:

     
    That which doesn't kill me makes me stronger!
  • 相关阅读:
    unix网络编程 初步了解TCP/IP协议
    unix网络编程 常见概念
    linux 环境变量
    linux c编程
    第二周学习笔记
    jmeter第一周学习笔记
    建造者模式
    原型设计模式
    抽象工厂模式
    工厂方法模式
  • 原文地址:https://www.cnblogs.com/21seu-ftj/p/12283956.html
Copyright © 2011-2022 走看看