zoukankan      html  css  js  c++  java
  • 在 < input > 标签里面 比较常用的type属性 以及用法

            关于<input>标签

          <input>标签在HTML代码里面本身是空的,也就是说单独调用<input>标签是没有任何作用的,而<input>标签常用的属性就是type,而type这个属性也拥有着很多属性,这篇文章主要是介绍一下type属性常用的一些属性 。

    常用的type属性


    纯文本内容   <input type="text" >
    密码纯文本内容   <input type="password">
    提交按钮   <input type="submit">
    单选框      <input type="radio">
    多选框      <input type="checkbox">

    比较常用的也就是上面这几种type属性。

    text 和 password  的区别


          text 和 password  实际上是一模一样的,他们全部是代表纯文本内容属性,text 属性并不会对输入框内的文本内容进行隐藏,而 password 属性却会对输入框内的文本内容进行隐藏保护,password 属性一般用于密码输入框。

            submit 属性的作用

       submit 属性的作用就是把它所在的表单里面的内容提交给服务器

       在单个表单里面正常情况下只会出现一次 submit属性。

    radio 属性的介绍 以及代码的写法

         radio 属性的介绍 

         radio 属性代表的是单选框,我们在注册账号的时候,

         一般的话都有一个选择性别的选项,而这个选项是单选的,

          这钟选择框就是单选框,也就是<input>标签通过type调用 radio 属性所达到的效果

          效果演示:

                           请选择你的性别:
                     男 女 保密

           

          代码的写法:

    Markup
    <form>    请选择你的性别<br/>
    <input type="radio" name="x"">男
    <input type="radio" name="x" >女
    <input type="radio" name="x">保密
    </form>

    checkbox 属性的介绍 以及代码的写法

          checkbox 属性的介绍:

          checkbox 属性代表的是多选框,在很多网页里面也是可以看到的,例如选择兴趣爱好,很多人不止一种兴趣爱好,而这个时候就会用到checkbox属性来制作一个多选框,写法和单选框radio属性一样的。

           演示效果 :

                你有哪些兴趣爱好?
                书法 篮球 足球

            代码的写法:

    Markup
    <form>    你有哪些兴趣爱好?<br />
    <input type="checkbox" name="x">书法
    <input type="checkbox" name="x">篮球
    <input type="checkbox" name="x">足球
    </form>

    后记

         单选框和多选框的前提是他们的选项是在同一个组,我们可以通过 name 属性来设置一个组。

         我上面所说的属性,全部是表单里面<input>标签所使用的 type属性,并不代表在其他标签里面效果也一样。https://www.cuteur.cn/post/513.html

  • 相关阅读:
    Door Frames CodeForces
    POJ 3090 Visible Lattice Points (ZOJ 2777)
    从斐波那契到矩阵快速幂
    Recursive sequence (矩阵快速幂)2016ACM/ICPC亚洲区沈阳站
    c++ 类实现 AVL树容器(包含迭代器)
    c++ 链表类的实现(包含迭代器)
    HDU
    【几何+模拟】二次元变换 计蒜客
    【bfs+链式向前星】防御僵尸(defend)计蒜客
    deque in Python
  • 原文地址:https://www.cnblogs.com/cuteur/p/14193037.html
Copyright © 2011-2022 走看看