Html 表单标签 Form

Html表单

#转载请留言联系

表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：

1、<form>标签定义整体的表单区域

action属性定义表单数据提交地址例如:http://www.baidu.com

method属性定义表单提交的方式，一般有“get”方式和“post”方式

2、<label>标签 label 标签不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

3、<input>标签定义通用的表单元素

type属性

type="text" 定义单行文本输入框

type="password" 定义密码输入框

type="radio" 定义单选框

type="checkbox" 定义复选框

type="file" 定义上传文件 form表单需要加上属性enctype="multipart/form-data"

type="submit" 定义提交按钮

type="reset" 定义重置按钮

type="button" 定义一个普通按钮

value属性定义表单元素的值,此值是数据提交时键的值

name属性定义表单元素的名称，此名称是提交数据时的键名

checked: radio 和 checkbox 默认被选中

readonly: 只读. text 和 password

disabled: 对所用input都好使.

4、<textarea>标签定义多行文本输入框
name:    表单提交项的键.
cols:    文本域默认有多少列
rows:    文本域默认有多少行
5、<select>标签定义下拉表单元素
 name:表单提交项的键.

          size：选项个数

          multiple：多选项 

                 <option> 下拉选中的每一项 属性：

                       value:表单提交项的值.   selected: selected下拉选默认被选中

                 <optgroup>为每一项加上分组
6、label 鼠标移到姓名上出输入框
<label for="www">姓名</label>
<input id="www" type="text">
7.fieldset
<fieldset>
    <legend>登录吧</legend>
    <input type="text">
</fieldset>

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="https://developer.mozilla.org/static/img/favicon32.7f3da72dcea1.png">
    <link rel="stylesheet" href="#">
    <title>Form表单注册面学习</title>

</head>
<body>
<!--action 定义表单数据提交地址-->
<form action="http://127.0.0.1:8000/post_info" method="post" enctype="multipart/form-data">
    <!--单行文本框-->
    <input type="text" name="username" placeholder="请输入账号"><br><br>
    <!--密码框-->
    <input type="password" name="password" placeholder="请输入密码"><br><br>
    <!--单选框-->
    性别：<label><input type="radio" name="sex" value="1">男</label>
    <label><input type="radio" name="sex" value="2">女</label>
    <!--多选框-->
    <br><br>
    最喜欢的游戏：
    <label><input type="checkbox" name="fav" value="LOL">英雄联盟</label>
    <label><input type="checkbox" name="fav" value="shoot">喷射战士</label>
    <label><input type="checkbox" name="fav" value="zelder">塞尔达传说</label>
    <label><input type="checkbox" name="fav" value="mario">马里奥</label>
    <!--上传图片-->
    <br><br>
    <input type="file" name="pic">
    <!--多行文本框-->
    <br><br>
    <textarea name="text" cols="30" rows="10"></textarea>
    <!--下拉列表-->
    <br><br>
    <select name="city">
        <option value="gz">广州</option>
        <option value="sz">深圳</option>
        <option value="zh">中山</option>
    </select>
    <!--提交表单-->
    <input type="submit" value="提交">
    <!--重置表单-->
    <input type="reset" value="重置">
</form>
</body>
</html>

</body>
</html>

Django 接受表单提交的数据

# urls.py添加
url(r'^post_info$', views.post_info),


# views.py添加
def post_info(request):
    print(request.POST)
    print(request.GET)
    print(request.FILES)
    for item in request.FILES:
        fileObj = request.FILES.get(item)
        f = open(fileObj.name, 'wb')
        iter_file = fileObj.chunks()
        for line in iter_file:
            f.write(line)
        f.close()
    return HttpResponse('ok')

参考：https://www.cnblogs.com/chichung/p/9664362.html