input属性太多,我这里仅列出几个我喜欢的吧。

disabled:首次加载时禁用此元素

checked:首次加载时选中此元素

form:输入字段所属的一个或多个表单

hieght:定义input字段的高度,适用于type=image

max_length:输入字段中字符的最大长度

min:与上相反

name:定义input元素的名称

pattern:输入字段值的模式或格式

multiple:允许一个以上的值

required:输入字段的值是必须的

size:输入字段的宽度

width:输入字段的宽度,适用于type=image

type:

  button   按扭

  checkbox 复选框

  file   文件

  hidden  隐藏

  imag   图片

  password  密码

  radio    单选框

  submit    提交按扭

  text    文本

value:input元素的值,提交后台的标识

实例演示区:

文本域:form表单:块级标签

    <form> #文本域
姓:<input type="text" name="firstname">
名:<input type="text" name="lastname">
<input type="submit" value="提交">
</form>
<form>#密码
用户名:<input type="text" name="user">
密码:<input type="password" name="password">
<input type="submit" value="提交">
</form>
<form>#复选框
我喜欢:
汔车:<input type="checkbox">
美女:<input type="checkbox">
电影:<input type="checkbox">
<input type="submit" value="提交">
</form>
<form>#单选框,name名称要一致才能互斥
你的姓别
男:<input type="radio" name="r">
女:<input type="radio" name="r">
<input type="submit" value="提交">
</form>
<form>#围绕数据的fileset
<fieldset>
<legend>健康信息</legend>
身高:<input type="text">
体重:<input type="text">
</fieldset>
</form>

效果图:

好玩的:提交文件给后台并保存文件 

说明:后台用的是django接收,有看到的朋友自己搭建,这里只列出过程

views.py

from django.shortcuts import render,HttpResponse
import os
# Create your views here.
def upload(request):
if request.method=='POST':
myfiles = request.FILES.get('myfile',None)
if not myfiles:
return HttpResponse('no files need upload..')
des_file = os.path.join(r'c:\test',myfiles.name)
with open(des_file,'wb+') as f:
for each_block in myfiles.chunks():
f.write(each_block)
return HttpResponse('upload over...') def index(request):
return render(request,'index.html')

配置好URL地址:

在views中编写接收文件后的处理函数

编写索引页代码

选择上传文件 :

html之input系列标签的更多相关文章

  1. 第一篇-Html标签中head标签,body标签中input系列,textarea和select标签

    第十四周课程(1-12章节) HTML 裸体 CSS   穿华丽衣服 Javascript 动起来 一 HTML (20个标签) 1.我们的浏览器是socket客户端 2.一套规则,浏览器认识的规则 ...

  2. html的body内标签之input系列2

    一,input系列:name属性用于让后台拿数据.value 只是在屏幕上的显示. 1. input type='text' name='query' value="张三"(相当于 ...

  3. html基础 表单标签 input系列 以及优化方法

    场景:在网页中显示手机用户信息的表单效果. 如:登录页.注册页标签名:input 用法是通过改变type属性值,来展示不同效果 1.1 html 代码 <!--placeholder 提示符又叫 ...

  4. input[file]标签的accept=”image/*”属性响应很慢的解决办法

    转自:http://blog.csdn.net/lx583274568/article/details/52983693 input[file]标签的accept属性可用于指定上传文件的 MIME类型 ...

  5. 从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别

    背景: 在清空input file标签选中值时,分别用了以下方法,发现有的对有的错: [√]$("#file")[0].value = ""; [√]$(&qu ...

  6. HTML:Input元素标签的详细介绍

    总结Input的标签: Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍.1,type=text输入类型是t ...

  7. 4、html的body内标签之input系列

    一.input标签与form表单 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  8. html的body内标签之input系列1

    1. Form的作用:提交当前的表单. 类似于去了银行提交的纸质单子,递到后台去办理相关业务. text,password只有输入的功能:button,submit只有点击的功能.想要把这些信息提交, ...

  9. html input file标签的上传文件 注意点

    文件上传框  代码格式:<input type=“file” name=“...” size=“15” input enctype="multipart/form-data“ maxl ...

随机推荐

  1. Mac抓包工具Charles

    一.下载 先到它的官网http://www.charlesproxy.com/可下载到最新版本,这个下载有点慢,我已经将它放到网盘中了:http://pan.baidu.com/s/1gdu0S4V ...

  2. React Native之生命周期

    React Native生命周期主要分为三大阶段:实例化阶段(图中上框部分),存在阶段(图中左框部分),销毁阶段(图中右框部分). 如图: 下面简单讲解一下三大阶段中各自的函数: 实例化阶段: 在日常 ...

  3. Win7 登入提示临时漫游档案

    HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\ProfileList

  4. [转]MMORPG服务器架构

    MMORPG服务器架构 一.摘要 1.网络游戏MMORPG整体服务器框架,包括早期,中期,当前的一些主流架构2.网络游戏网络层,包括网络协议,IO模型,网络框架,消息编码等.3.网络游戏的场景管理,A ...

  5. nginx的启动,停止命令

    停止操作停止操作是通过向nginx进程发送信号(什么是信号请参阅linux文 章)来进行的步骤1:查询nginx主进程号ps -ef | grep nginx在进程列表里 面找master进程,它的编 ...

  6. 右键菜单添加程序,指定图标, Notepad2、Sublime Text 2

    右键添加Sublime Text 打开方式 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\shell\Sublime Text] ...

  7. c#实现数据的左补右补功能

    /// <summary>        /// 左補右補功能        /// </summary>        /// <param name="st ...

  8. Git连接Github

    环境:Ubuntu Server 12.04 安装Git apt-get install git git-core 配置本机Git git config --global user.name &quo ...

  9. [转]ssh常用用法小结

    ssh常用用法小结 1.连接到远程主机: 命令格式 : ssh name@remoteserver 或者 ssh remoteserver -l name 说明:以上两种方式都可以远程登录到远程主机, ...

  10. Spring源码学习之:模拟实现BeanFactory,从而说明IOC容器的大致原理

    spring的IOC容器能够帮我们自动new对象,对象交给spring管之后我们不用自己手动去new对象了.那么它的原理是什么呢?是怎么实现的呢?下面我来简单的模拟一下spring的机制,相信看完之后 ...