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

html之input标签（11）

相关推荐