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