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

Html 表单标签 Form的更多相关文章

  1. 前端 HTML body标签相关内容 常用标签 表单标签 form

    表单标签 form 表单是一个包含表单元素的区域表单元素是允许用户在表单中输入内容,比如:文本域(textarea).输入框(input).单选框() 表单的作用 form标签作用是把用户输入数据信息 ...

  2. [原创]java WEB学习笔记62：Struts2学习之路--表单标签:form,表单标签的属性，textfield, password, hidden，submit ，textarea ，checkbox ，list, listKey 和 listValue 属性，select ，optiongroup ，checkboxlist

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  3. 前端 HTML body标签相关内容 常用标签 表单标签 form里面的 input标签介绍

    input标签用于接收用户输入.可以利用input 可以做登录页面 input标签是行内块标签 <input> 元素会根据不同的 type 属性,变化为多种形态. name属性:表单点击提 ...

  4. 前端 HTML body标签相关内容 常用标签 表单标签 form里面的 label标签介绍

    定义:<label> 标签为 input 元素定义标注(标记). label标签功能:关联input标签文本与表达元素,点击input标签文本时,如同点击表单元素一样. label标签是行 ...

  5. 0007 表单标签(form、select)

    目标: 能写出最常用的注册类表单 能说出input表单常见属性 现实中的表单,类似我们去银行办理信用卡填写的单子. 如下图 作用: 表单目的是为了收集用户信息. 在我们网页中, 我们也需要跟用户进行交 ...

  6. 前端表单标签form 及 简单应用

    今日内容 form 表单(重点) 后端框架之 flask 简介 内容详细 form 表单 1.作用 form 表单可以在前端获取用户输入的数据并发送给后端(服务端) 2.input 标签 获取用户数据 ...

  7. 前端 HTML body标签相关内容 常用标签 表单标签 form 表单控件分类

    表单控件分类 input标签: input标签 type属性的text,password,button按钮,submit按钮 input标签placeholder属性 标签上显示内容 input标签 ...

  8. 一天搞定CSS：表单（form）--20

    1.表单标签 2.input标签属性与取值 代码演示 <!DOCTYPE html> <html> <head> <meta charset="UT ...

  9. springMVC(7)---表单标签

    springMVC(7)---表单标签 form标签作用                                     简单来讲form表单有两大作用 1:第一就是往后端提交数据或者前端回显 ...

随机推荐

  1. 详解XMLHttpRequest的跨域资源共享

    0x00 背景 在Browser Security-同源策略.伪URL的域这篇文章中提到了浏览器的同源策略,其中提到了XMLHttpRequest严格遵守同源策略,非同源不可请求.但是,在实践当中,经 ...

  2. 命令行创建Android应用，命令行生成签名文件，命令行查看签名信息，对APK包签名并编译运行

    一.命令行创建Android应用 android create project -n HelloWorld -t android-22 -p HelloWorld1 -k org.crazyit.he ...

  3. [转] TCP/IP原理、基础以及在Linux上的实现

    导言:本篇作为理论基础,将向我们讲述TCP/IP的基本原理以及重要的协议细节,并在此基础上介绍了TCP/IP在LINUX上的实现. OSI参考模型及TCP/IP参考模型 OSI模型(open syst ...

  4. Eclipse *的安装（图文详解）

    不多说,直接上干货!  前期博客 Eclipse *下载 可以直接解压,再配置JDK,即可使用. 结束 欢迎大家,加入我的微信公众号:大数据躺过的坑        人工智能躺过的坑       同时, ...

  5. gulp4.0 前端构建脚手架

    最近看了下gulp4.0的升级,感觉和3.0相比变化还是比较大的,很多3.0的写法和插件会出现一些莫名其妙的变化,详细的变化就先不说了,这里我直接把我配置好的代码拿过来吧,方便各位可以更好的学习和使用 ...

  6. 机器学习-KNN算法

    原理 KNN算法,又叫K近邻算法.就是在训练集中数据和标签已知的情况下,输入测试数据,将测试数据的特征与训练集中对应的特征进行相互比较,找到训练集中与之最为相似的前K个数据,则该测试数据对应的类别就是 ...

  7. ibatis Dynamic总结(ibatis使用安全的拼接语句，动态查询)

    ibatis中使用安全的拼接语句,动态查询,ibatis比JDBC的优势之一,安全高效 说明文字在注释中 一.引入 一个小例子  <select id="selectAllProduc ...

  8. 解决Code First因_migrationHistory表与代码不一致的问题

    我们在测试环境多人开发时,由于会存在多个测试.开发环境,但是大家共用一个数据库. 这时候会碰到一个问题,一旦有某个人通过Migration更新了数据库,其他环境在首次查询数据库的时候都会收到Dbcon ...

  9. DAO设计模式(转)

    J2EE开发人员使用数据访问对象(DAO)设计模式把底层的数据访问逻辑和高层的商务逻辑分开.实现DAO模式能够更加专注于编写数据访问代码. 我们先来回顾一下DAO设计模式和数据访问对象. DAO基础  ...

  10. C#：ORM--实体框架EF（entity framework）（1）

    本文来自:http://www.cnblogs.com/xuf22/articles/5513283.html 一.什么是ORM ORM(Object-relational mapping),中文翻译 ...