前端入门html(表单)

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(表单)的更多相关文章

[入门到吐槽系列] Webix 10分钟入门二表单Form的使用
前言继续接着上一篇的webix入门:https://www.cnblogs.com/zc22/p/15912342.html.今天完成剩下两个最重要的控件,表单和表格的使用.掌握了这两个,整个Web ...
AngularJs入门之表单开发
本文和大家分享的主要是前端开发中必备的AngularJs框架表单开发相关基础知识,希望对大家使用和学习AngularJs有所帮助. 1.简单的表单提交: 2.更多的表单元素: 3.初始化表单: 代码 ...
表单提交---前端页面模拟表单提交(form)
有些时候我们的前端页面总没有<form></form>表单,但是具体的业务时,我们又必须用表单提交才能达到我们想要的结果,LZ最近做了一些关于导出的一些功能,需要调用浏览器默认 ...
知问前端——Ajax提交表单
本文,运用两大表单插件,完成数据表新增的工作. 一.创建数据库创建一个数据库,名称为:zhiwen,表——user表,字段依次为:id.name.pass.email.sex.birthday.da ...
简易用户管理系统-前端实现（表单&提交请求&button$基础）
laravel框架编写简易用户管理系统,前端Layui框架. 1.动态生成列表项实现效果 PHP后台传入用户对象($users). 前端页面接收数据传入table. 逻辑就是在生成表格时,遍历传来的 ...
前端框架bootstrap 表单和导航菜单的 Demo（第二篇）
表单: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...
PHP新手入门1——表单
注:本身是Android,Android之前是java.但公司后台PHP特别多.就好奇php后台是怎么通过一个url给我数据的(完全不懂php).于是就学呗.学习系列随笔第一人称是一个Android小 ...
php入门之表单创建和基本处理
为了方便后面学习数组,这里引入了过渡章节就是表单,至于为什么,等真的学习到数组的时候你就会发现它的妙处拉. ============================================== ...
jeecg入门操作—表单界面
一.搭建jeecg开发环境参考环境搭建步骤 https://www.cnblogs.com/dyh004/p/10687633.html 二.创建用户数据库表: 登录上jeecg平台,点击在线开发- ...

随机推荐

tomcat 时间相差8个小时，百度上查到的，备份下
通常网上一查都是修改 tomcat 的参数 ,如catalina 文件,jvm parameters 等.如果都不起作用,可以使用如下方式.. 你可以修改jdk的时间校正了,你这么来.进入 \hom ...
c++编程思想里面的错误（可能c++标准变了，所以以前的东西没有更新）
第一卷第五章 5.3友元下面的代码是<c++编程思想>里面的代码, struct X; struct Y{ void f(X*); }; struct X{ private: int ...
2018.08.20 bzoj1143: [CTSC2008]祭祀river（最长反链）
传送门一道简单的求最长反链. 反链简单来说就是一个点集,里面任选两个点u,v都保证从u出发到不了v且v出发到不了u. 链简单来说就是一个点集,里面任选两个点u,v都保证从u出发可以到达v或者v出发可 ...
2018.07.13 [HNOI2015]落忆枫音（容斥原理+dp）
洛谷的传送门 bzoj的传送门题意简述:在DAG中增加一条有向边,然后询问新图中一共有多少个不同的子图为"树形图". 解法:容斥原理+dp,先考虑没有环的情况,经过尝试不难发现 ...
22. Valuing Water 珍惜水资源
. Valuing Water 珍惜水资源 ① Humanity uses a little less than half the water available worldwide.Yet occu ...
json&pickle
用于序列化的两个模块 json,用于字符串和 python数据类型间进行转换pickle,用于python特有的类型和 python的数据类型间进行转换Json模块提供了四个功能:dumps.du ...
nvarchar,varchar 区别
char char是定长的,也就是当你输入的字符小于你指定的数目时,char(8),你输入的字符小于8时,它会再后面补空值.当你输入的字符大于指定的数时,它会截取超出的字符. nva ...
2017 pycharm 激活码
BIG3CLIK6F-eyJsaWNlbnNlSWQiOiJCSUczQ0xJSzZGIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiI ...
webuploader php上传视频
webuploader 上传大视频文件在网上找了一个,自己重新组合了下,两个主要的文件,再加上官方下载的文件.其中有几个重要的点. 1.上传存放视频目录为了测试直接777 2.fileupload ...
scanf和fscanf读取文件
这篇是针对推箱子游戏而写的,某个时候在学C语言,最近转到windows设计,不知道是否有同样的感受,后面的东西学了,前面的就有点生疏了.其实,我的理解是,注意力转移了,当集中于当前问题的时候就会忽略以 ...

前端入门html(表单)

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

随机推荐

热门专题