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. two Sum ---- LeetCode 001

    Given an array of integers, return indices of the two numbers such that they add up to a specific ta ...

  2. 【Oracle XE系列之二】PLSQL Developer 远程连接Oracle XE数据库

    1.去http://www.oracle.com/technetwork/database/features/instant-client/index-097480.html下载Instant Cli ...

  3. codeforces #round363 div2.C-Vacations (DP)

    题目链接:http://codeforces.com/contest/699/problem/C dp[i][j]表示第i天做事情j所得到最小的假期,j=0,1,2. #include<bits ...

  4. matio使用

    http://na-wiki.csc.kth.se/mediawiki/index.php/MatIO (1)build根据教程 (2)sudo ldconfig (3)写main根据链接:修改几个类 ...

  5. 用 CSS 实现字符串截断

    [要求]:如何用css实现字符串截断,超出约定长度后用缩略符...代替?   ♪ 答: <html> <head> <meta charset="UTF-8&q ...

  6. 性能测试之-wrk(转)

    转载地址:http://zjumty.iteye.com/blog/2221040 测试先行是软件系统质量保证的有效手段. 在单元测试方面, 我们有非常成熟的 xUnit 方案. 在集成测试方面, 我 ...

  7. Lucene建索引代码

    Lucene 是apache软件基金会一个开放源代码的全文检索引擎工具包,是一个全文检索引擎的架构,提供了完整的查询引擎和索引引擎,部分文本分析引擎. Lucene的目的是为软件开发人员提供一个简单易 ...

  8. meta标签兼容性

    基本标签SEO 优化为移动设备添加 viewportWindows 8其他 禁止数字识自动别为电话号码不让android识别邮箱每 8 秒刷新一次页面移动端的头部标签和meta 基本标签 声明文档使用 ...

  9. [转载] TCP与UDP对比

    TCP和UDP区别     TCP UDP 是否连接 面向连接 面向非连接 传输可靠性 可靠的 不可靠的 应用场合 传输大量的数据 少量数据 速度 慢 快     OSI 和 TCP/IP 模型在传输 ...

  10. tyvj1012 P1012 - 火柴棒等式 ——暴力枚举

    题目链接:https://www.tyvj.cn/Problem_Show.aspx?id=1012 可以发现:最大的数字绝对不超过999,只要枚举出0-999所有数字需要的火柴数,然后再枚举C和A, ...