zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    el-select下拉框选项太多导致卡顿,使用下拉框分页来解决
    vue+elementui前端添加数字千位分割
    Failed to check/redeclare auto-delete queue(s)
    周末啦,做几道面试题放松放松吧!
    idea快捷键
    解决flink运行过程中报错Could not allocate enough slots within timeout of 300000 ms to run the job. Please make sure that the cluster has enough resources.
    用.net平台实现websocket server
    MQTT实战3
    Oracle 查看当前用户下库里所有的表、存储过程、触发器、视图
    idea从svn拉取项目不识别svn
  • 原文地址:https://www.cnblogs.com/icemonkey/p/10483808.html
Copyright © 2011-2022 走看看