• 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="重置">









  • 相关阅读:
    解决Django在mariadb创建的表插入中文乱码的问题
    运行在CentOS7.5上的Django项目时间不正确问题
    获取百度网盘真实下载连接
    Django2.x版本在生成数据库表初始化文件报错
    Pycharm中的Django项目连接mysql数据库
    Django2.x版本路由系统的正则写法以及视图函数的返回问题
    CentOS7.5安装坚果云
    CentOS7.5安装下载工具
    CentOS6.5修改/etc/pam.d/sshd后root无法ssh登陆
    oracle 时间
  • 原文地址:https://www.cnblogs.com/liang-wei/p/9597604.html
Copyright © 2020-2023  润新知