• 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

  • 相关阅读:
    jdk8 xp
    electron react
    electron install失败
    0511 Braft Editor和嵌套路由
    组播
    0427
    duilib自定义组件
    android 读写文件、列出根目录文件及新版本权限
    android Fragment使用RecyclerView
    Duilib 带xml的1
  • 原文地址:https://www.cnblogs.com/icemonkey/p/10483808.html
Copyright © 2020-2023  润新知