• 欢迎光临~

HTML标签表单标签概述和表单项input

开发技术 开发技术 2022-08-01 次浏览

HTML标签表单标签_概述

表单:

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

  form:用于定义表单的,可以定义一个范围,范围代表采集用户数据的范围
    属性:
      action:指定调教数据的url方式
      mehtod:指定提交方式
        分类:一共7种,2种比较常用
          get:
            1、请求参数会在地址栏中显示    
            2、请求参数大小是有限制的
            3、不太安全
          post:
            1、请求参数不会再地址栏中显示,会封装在请求体中
            2、请求参数的大小没有限制
            3、较为安全
    表单项中的数据要想被提交,必须指定其name属性
    <form action="#" method="get">
        用户名:<input name="username"><br>
        密码:<input name="password"><br>
        <input type="submit" value="登录">
    </form>

 

 

 

 

 

 

HTML标签表单标签_表单项input

表单项标签:

  input:可以通过type属性值,改变元素展示的样式

    type属性:

      text:文本输入框 默认值  

        placeholder:指定输入框的提示信息,当输入框的内容发生变化时,会自动清空提示信息

      password:密码输入框

      radio:单选框

        注意:

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

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

          3、checked属性可以指定默认值

      checkbox:复选框

          注意:

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

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

          3、checked属性可以指定默认值

      file:文件选择框

      hidden:隐藏域,用来提交一些信息

      按钮:

        1、submit:提交按钮

        2、button:普通按钮

        3、image:图片提交按钮

          src属性指定图片的路径

    label:指定输入项的文字描述信息

      注意:

        label的for属性一般会和input的id属性值对应,如果对应了则点击label区域,会让input输入框获取焦点

 

    <form action="#" method="get">
        <label for="username">用户名:</label><input type="text" name="username" placeholder="请输入用户名" id="username"><br>
        密码:<input type="password" name="password" placeholder="请输入密码"><br>
        性别:<input type="radio" name="gender" value="male" checked="checked"><input type="radio" name="gender" value="female"><br>
        爱好:<input type="checkbox" name="hobby" value="shopping"> 逛街
        <input type="checkbox" name="hobby" value="java"> JAVA
        <input type="checkbox" name="hobby" value="game" checked="checked"> 游戏
        <br>
        图片:<input type="file"><br>
        隐藏域:<input type="hidden" value="aaa"> <br>
        取色器:<input type="color"> <br>
        生日:<input type="date" name="birthday"> <br>
        生日:<input type="datetime-local" name="birthday"> <br>
        邮箱:<input type="email" name="email"> <br>
        年龄:<input type="number" name="age"> <br>
        <br>
        <input type="submit" value="登录">
        <input type="button" value="一个按钮"><br>
        <input type="image" src="img/regbtn.jpg">
    </form>

 

  select:下拉列表

  textarea:文本域

 

程序员灯塔
转载请注明原文链接:HTML标签表单标签概述和表单项input
喜欢 (0)