zoukankan      html  css  js  c++  java
  • html之input标签(11)

    1.输入框

    type=“text” 就是一个简单的输入框

    <body>
    <input type="text">
    </body>

    2.密码输入框

    密码输入框的类型为password,和text一样就是一个输入框,不过password类型的输入框,输入的内容是不可以见的,不是明文

    <body>
    <input type="password">
    </body>

    3.按钮

    按钮的类型为button,如果只写一个类型,就只是一个按钮,上面并没有字,按钮上面的字需要设置value,value的值就是按钮上面的内容

    button并不会提交东西到后台,需要配合js使用

    <body>
    <input type="button"  value="登录">
    </body>

    4.提交按钮

    提交按钮的类型为submit,使用submit会将from表单中的内容提交到后端

    <body>
         <input type="text">
        <input type="password">
        <input type="button" value="登录1">
        <input type="submit" value="登录2">
    </body>

    5.form  表单及提交到后端

    整个from标签内部是为一个表单,action属性为提交到哪里,可以是http://localhost:8000/login方式,也可以直接写/login,method属性设置提交方式,如果不写 ,默认使用get方式提交(发送)数据

    <body>
    <form action="/login" method="post">
    <input type="text" >
    <input type="password" >
    <input type="button" value="登录">
    <input type="submit" value="登录">

    </form>
    </body>
    1.使用submit会将from表单中的内容提交到后端
    2.button并不会提交东西到后台,需要配合js使用

     6.input name属性

    name属性用于后端获取代码获取输入的值

    <body>
    <form action="/login" method="post">
         <input type="text" name="user">
        <input type="password" name="pwd">
        <input type="button" value="登录">
        <input type="submit" value="登录">
    
    </form>
    </body>

    注:用户提交到后端的格式为:
    {'user':'用户输入的用户名’,'password':'用户输入的密码'}
    so,后端获取用户输入的值(python):
    1.使用post方式提交
    request.POST.get('user') =====  获取到用户输入的用户名
    request.POST.get('pwd') =====  获取到用户输入的密码
    2.使用get方式提交
    request.GET.get('user') =====  获取到用户输入的用户名
    
    
    request.GET.get('pwd') =====  获取到用户输入的密码
     

    7.输入框默认值

    当type为text和password时,也有个value属性,设置value属性后,输入框会中默认的value的值

    <body>
    <form action="/login" method="post">
        <input type="text" name="user" value="admin">
        <input type="password" name="pwd">
        <input type="button" value="登录">
        <input type="submit" value="登录">
    </form>
    </body>

    html页面user输入框中的默认值即admin
    password和text value属性相同

    8.单选框

    type为radio时为单选框,其中name属性相同,为互斥(即选择一个,在选择另一个后,前一个将会被去掉不会被选中),value属性用于提交到后端后,后端区分选择的是哪一个。

    checked="checked"为默认值,即默认哪一个被选中
    <body>
        <form action="/test" method="post">
            <div>
                <p>请选择性别</p>
                男:<input type="radio" name="gender" value="1" checked="checked"> 
    女:
    <input type="radio" name="gender" value="2">
    <input type=
    "submit" value="提交">
    </div>
    </form>
    </body>

    9.复选框

    type为checkbox时为复选框,可以多选,设置name属性,每个复选框的name相同,此时不互斥,而是为了和其他复选框区分开,value属性用于后台获取选择哪些值

    checked="checked"为默认值,即默认选中哪些。
    <body>
        <form action="/test" method="post">
            <div>
                <p>请选择性别</p>
                男:<input type="radio" name="gender" value="1" >
                女:<input type="radio" name="gender" value="2">
                <p>爱好</p>
                篮球:<input type="checkbox" name="favor" value="1">
                足球:<input type="checkbox" name="favor" value="2">
                皮球:<input type="checkbox" name="favor" value="3">
                <p>技能</p>
                打游戏:<input type="checkbox" name="skill" value="1">
                写代码:<input type="checkbox" name="skill" value="2">
                <input type="submit" value="提交">
            </div>
        </form>
    </body>

    10.上传文件

    type为file时为上传文件,依赖enctype="multipart/form-data"属性,作用是把上传的文件一点一点的发给服务器,后台获取数据请看python篇

      <form action="test" method="post" enctype="multipart/form-data">
            <input type="file" name="fname">
            <input type="submit" value="上传">
        </form>

    11.输入内容或者选择内容重置

    type为reset时,为重置,点击后重置当前from表单为默认值

    <input type="reset" value="重置">









  • 相关阅读:
    Leetcode Excel Sheet Column Number
    AlgorithmsI PA2: Randomized Queues and Deques Subset
    AlgorithmsI PA2: Randomized Queues and Deques RandomizedQueue
    AlgorithmsI PA2: Randomized Queues and Deques Deque
    AlgorithmsI Programming Assignment 1: PercolationStats.java
    hdu多校第四场 1003 (hdu6616) Divide the Stones 机智题
    hdu多校第四场 1007 (hdu6620) Just an Old Puzzle 逆序对
    hdu多校第四场1001 (hdu6614) AND Minimum Spanning Tree 签到
    hdu多校第三场 1007 (hdu6609) Find the answer 线段树
    hdu多校第三场 1006 (hdu6608) Fansblog Miller-Rabin素性检测
  • 原文地址:https://www.cnblogs.com/liang-wei/p/9597604.html
Copyright © 2011-2022 走看看