day48

配置Django项目：https://blog.csdn.net/zV3e189oS5c0tSknrBCL/article/details/79606994

value为先后端提交的内容

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <meta charset="UTF-8">

     <title>form表单</title>

 </head>

 <body>

 <form action="http://127.0.0.1:8000/upload/">

     <p>用户名：

         <input name="name" type = "text">

     </p>

     <p>密码：

         <input name="password" type = "password">

     </p>

     <p> 性别：

         <input name="gender" type="radio" value="1">男

         <input name="gender" type="radio" value="0">女

     </p>

     <p> 爱好：

         <input name="hobby" type="checkbox" value="basketball">篮球

         <input name="hobby" type="checkbox" value="football">足球

         <input name="hobby" type="checkbox" value="tai">台球

     </p>

     <select name="from1" id="s1">

         <option value="bj">北京</option>

         <option value="sh">上海</option>

         <option value="sc">四川</option>

     </select>

     <select name="from2" id="s2">

         <optgroup label="北京">

             <option value="cp">昌平</option>

             <option value="cy">朝阳</option>

             <option value="hd">海淀</option>

             <option value="ft">丰台</option>

         </optgroup>

         <optgroup label="上海">

             <option value="pdxq">浦东新区</option>

             <option value="mhq">闵行区</option>

             <option value="hpq">黄浦区</option>

         </optgroup>

         <optgroup label="四川">

             <option value="pzh">攀枝花</option>

             <option value="zg">自贡</option>

             <option value="my">绵阳</option>

         </optgroup>

     </select>

     <!--大段文本-->

     <p> <textarea name="info" id="t1" cols="30" rows="10">

     </textarea></p>

     <p>头像：

         <input type="file">

     </p>

     <p><input type="submit" value="提交"></p>

 </form>

 </body>

 </html>

页面显示：

运行Django,并提交后显示：

form表单相关内容
    前后端有数据交互的时候用form表单
    
    form表单提交数据的几个注意事项:
        1. 所有获取用户输入的标签都必须放在form表单里面
        2. action控制着往哪儿提交 (html中的第9行)
        3. input\select\textarea 都需要有name属性 （提交结果需要键值对形式，如上图的运行结果）
        4. 提交按钮 <input type="submit">

小总结:
        input系列:
            text
                value        设置默认值
                placeholder 设置占位内容
                password
            
            radio  单选框
            checkbox 多选框
            
            date   日期
            datetime 时间
            
            file  文件
            
            button  普通按钮,多用JS给它绑定事件
            reset   重置
            submit  提交
            
            埋下伏笔:什么时候用 <input type="hidden">
            
        textarea    大段文本         
        select      下拉菜单         
        option      具体的下拉选项      
        optgroup    分组的下拉框
         -label="上海"

表单属性

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <meta charset="UTF-8">

     <title>form表单</title>

 </head>

 <body>

 <!--action控制往哪提交  如果有上传文件固定格式method="post" enctype="multipart/form-data"-->

 <form action="http://127.0.0.1:8000/upload/" method="post" enctype="multipart/form-data">

     <!--readonly 只读能看不能改-->

     <p>

         <label for="i1">用户名：</label>

         <input id="i1" name="name" type = "text" readonly value="小强">

         <!--默认提示-->

         <input name="name" type = "text" placeholder="小强">

     </p>

     <p>密码：

         <input name="password" type = "password">

     </p>

     <p> 性别：

         <!--这种形式，单击 男 也可以进行选择，不需要点击圈圈-->

         <label for="r1">男</label>

         <input id="r1" name="gender" type="radio" value="1">

         <!--也可以写成这种形式-->

         <label>男<input name="gender" type="radio" value="1"></label>

         <input name="gender" type="radio" value="0">女

         <!--默认选项-->

         <input checked name="gender" type="radio" value="2">保密

     </p>

     <p>必须是email格式<input type="email" name="email"></p>

     <p> 爱好：

         <input name="hobby" type="checkbox" value="basketball">篮球

         <input name="hobby" type="checkbox" value="football">足球

         <input name="hobby" type="checkbox" value="tai">台球

     </p>

     <p>生日：<input name="birthday" type="date"></p>

     <select name="from1" id="s1">

         <option value="bj">北京</option>

         <!--默认选择-->

         <option value="sh" selected>上海</option>

         <option value="sc">四川</option>

     </select>

     <!--分组的下拉选项-->

     <select name="from2" id="s2">

         <optgroup label="北京">

             <option value="cp">昌平</option>

             <option value="cy">朝阳</option>

             <option value="hd">海淀</option>

             <option value="ft">丰台</option>

         </optgroup>

         <optgroup label="上海">

             <option value="pdxq">浦东新区</option>

             <option value="mhq">闵行区</option>

             <option value="hpq">黄浦区</option>

         </optgroup>

         <optgroup label="四川">

             <option value="pzh">攀枝花</option>

             <option value="zg">自贡</option>

             <option value="my">绵阳</option>

         </optgroup>

     </select>

     <!--大段文本-->

     <p> <textarea name="info" id="t1" cols="30" rows="10">

     </textarea></p>

     <p>头像：

         <input name="document" type="file">

     </p>

     <p><input type="submit" value="提交"></p>

     <!--重置-->

     <p><input type="reset" value="重置"></p>

 </form>

 </body>

 </html>

可以选择文件上传，html文件需修改为第10行处。

png文件到venv文件下。

具体新添加的内容见注释。

如邮件格式：

表单参考：https://www.cnblogs.com/liwenzhou/p/7988087.html

具体看老男孩Python教程 day48 02 python fullstack s9day48-form表单相关内容

HTTP协议区别：

GET:参数放在请求行

POST:参数放在请求体（大的数据，敏感信息）

前端入门html(表单)的更多相关文章

  1. [入门到吐槽系列] Webix 10分钟入门 二 表单Form的使用

    前言 继续接着上一篇的webix入门:https://www.cnblogs.com/zc22/p/15912342.html.今天完成剩下两个最重要的控件,表单和表格的使用.掌握了这两个,整个Web ...

  2. AngularJs入门之表单开发

    本文和大家分享的主要是前端开发中必备的AngularJs框架表单开发相关基础知识,希望对大家使用和学习AngularJs有所帮助. 1.简单的表单提交: 2.更多的表单元素: 3.初始化表单: 代码 ...

  3. 表单提交---前端页面模拟表单提交(form)

    有些时候我们的前端页面总没有<form></form>表单,但是具体的业务时,我们又必须用表单提交才能达到我们想要的结果,LZ最近做了一些关于导出的一些功能,需要调用浏览器默认 ...

  4. 知问前端——Ajax提交表单

    本文,运用两大表单插件,完成数据表新增的工作. 一.创建数据库 创建一个数据库,名称为:zhiwen,表——user表,字段依次为:id.name.pass.email.sex.birthday.da ...

  5. 简易用户管理系统-前端实现（表单&提交请求&button$基础）

    laravel框架编写简易用户管理系统,前端Layui框架. 1.动态生成列表项 实现效果 PHP后台传入用户对象($users). 前端页面接收数据传入table. 逻辑就是在生成表格时,遍历传来的 ...

  6. 前端框架bootstrap 表单和导航菜单的 Demo（第二篇）

    表单: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...

  7. PHP新手入门1——表单

    注:本身是Android,Android之前是java.但公司后台PHP特别多.就好奇php后台是怎么通过一个url给我数据的(完全不懂php).于是就学呗.学习系列随笔第一人称是一个Android小 ...

  8. php入门之表单创建和基本处理

    为了方便后面学习数组,这里引入了过渡章节就是表单,至于为什么,等真的学习到数组的时候你就会发现它的妙处拉. ============================================== ...

  9. jeecg入门操作—表单界面

    一.搭建jeecg开发环境 参考环境搭建步骤 https://www.cnblogs.com/dyh004/p/10687633.html 二.创建用户数据库表: 登录上jeecg平台,点击在线开发- ...

随机推荐

  1. 【转】MEF程序设计指南五：迟延(Lazy)加载导出部件(Export Part)与元数据（Metadata）

    MEF中使用导出与导入,实质上就是对一个对象的实例化的过程,通过MEF的特性降低了对象的直接依赖,从而让系统的设计达到一种高灵活.高扩展性的效果.在具体的设计开发中,存在着某些对象是不需要在系统运行或 ...

  2. linux 动态库 静态库 函数覆盖

    本文讨论了linux动态库  静态库中函数的覆盖问题. 测试目的: 同名函数,分别打成动态库libdync_lib.so与静态库libstatic_lib.a,并把libstatic_lib.a打到另 ...

  3. mupdf编译snprintf冲突问题

    mupdf-1.6-source\thirdparty\jbig2dec\config_win32.h //#  define snprintf _snprintf

  4. 深入应用c++11 随书代码

    代码并未在作者github上提供 将书中代码敲至vc 并调试运行 依赖BOOST库 编译环境vs2015 boost1.59 // Client.cpp : 定义控制台应用程序的入口点. // #in ...

  5. mybatis 和 mybatis-spring

    一. 1. 实体bean  package com.mybatisBean; public class User { private Integer id; private String name; ...

  6. MYSQL 问题小总结

    mysql 问题小总结 1.MySQL远程连接ERROR 2003(HY000):Can't connect to MySQL server on ‘ip’(111)的问题 通常是mysql配置文件中 ...

  7. 2018.09.29 bzoj3039: 玉蟾宫（悬线法）

    传送门 悬线法的板子题. 悬线法只需要保存当期点向下最多多少个,把这个当成一条线,再处理出线绷直之后最多能向左右延展多少就行了. 代码: #include<bits/stdc++.h> # ...

  8. 2018.06.30 BZOJ1026: [SCOI2009]windy数（数位dp）

    1026: [SCOI2009]windy数 Time Limit: 1 Sec Memory Limit: 162 MB Description windy定义了一种windy数.不含前导零且相邻两 ...

  9. UVa 12174 Shuffle （滑动窗口）

    题意:你正在使用的音乐播放器有一个所谓的乱序播放功能,即随机打乱歌曲的播放顺序.假设一共有s首歌, 则一开始会给这s首歌随机排序,全部播放完毕后再重新随机排序.继续播放,依次类推.注意,当s首歌播放完 ...

  10. Redis Quick Start [遇到问题解决问题版]

    http://redis.io/topics/quickstart make test 时的问题: 问题:gcc: Command not found 解决:yum install gcc [root ...