1.输入框

type=“text” 就是一个简单的输入框

<body>
<input type="text">
</body>

2.密码输入框

密码输入框的类型为password，和text一样就是一个输入框，不过password类型的输入框，输入的内容是不可以见的，不是明文

<body>
<input type="password">
</body>

3.按钮

按钮的类型为button，如果只写一个类型，就只是一个按钮，上面并没有字，按钮上面的字需要设置value，value的值就是按钮上面的内容

button并不会提交东西到后台，需要配合js使用

<body>
<input type="button"  value="登录">
</body>

4.提交按钮

提交按钮的类型为submit，使用submit会将from表单中的内容提交到后端

<body>

     <input type="text">

    <input type="password">

    <input type="button" value="登录1">

    <input type="submit" value="登录2">

</body>

5.form  表单及提交到后端

整个from标签内部是为一个表单，action属性为提交到哪里，可以是http://localhost:8000/login方式，也可以直接写/login，method属性设置提交方式，如果不写 ，默认使用get方式提交（发送）数据

<body>
<form action="/login" method="post">
     <input type="text" >
    <input type="password" >
    <input type="button" value="登录">
    <input type="submit" value="登录">

</form>
</body>
1.使用submit会将from表单中的内容提交到后端
2.button并不会提交东西到后台，需要配合js使用

6.input name属性

name属性用于后端获取代码获取输入的值

<body>

<form action="/login" method="post">

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

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

    <input type="button" value="登录">

    <input type="submit" value="登录">

</form>

</body>

注：用户提交到后端的格式为：
{'user'：'用户输入的用户名’,'password':'用户输入的密码'}
so,后端获取用户输入的值（python）：
1.使用post方式提交
request.POST.get（'user'） =====  获取到用户输入的用户名
request.POST.get（'pwd'） =====  获取到用户输入的密码
2.使用get方式提交
request.GET.get（'user'） =====  获取到用户输入的用户名


request.GET.get（'pwd'） =====  获取到用户输入的密码


 




7.输入框默认值


当type为text和password时，也有个value属性，设置value属性后，输入框会中默认的value的值




<body>

<form action="/login" method="post">

    <input type="text" name="user" value="admin">

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

    <input type="button" value="登录">

    <input type="submit" value="登录">

</form>

</body>

html页面user输入框中的默认值即admin
password和text value属性相同




8.单选框


type为radio时为单选框，其中name属性相同，为互斥（即选择一个，在选择另一个后，前一个将会被去掉不会被选中），value属性用于提交到后端后，后端区分选择的是哪一个。


checked="checked"为默认值，即默认哪一个被选中




<body>

    <form action="/test" method="post">

        <div>

            <p>请选择性别</p>

            男：<input type="radio" name="gender" value="" checked="checked"> 
            女：<input type="radio" name="gender" value=""> 
            <input type="submit" value="提交"> 
         </div> 
    </form> 
</body>




9.复选框


type为checkbox时为复选框，可以多选，设置name属性，每个复选框的name相同，此时不互斥，而是为了和其他复选框区分开，value属性用于后台获取选择哪些值


checked="checked"为默认值，即默认选中哪些。




<body>

    <form action="/test" method="post">

        <div>

            <p>请选择性别</p>

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

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

            <p>爱好</p>

            篮球：<input type="checkbox" name="favor" value="">

            足球：<input type="checkbox" name="favor" value="">

            皮球：<input type="checkbox" name="favor" value="">

            <p>技能</p>

            打游戏：<input type="checkbox" name="skill" value="">

            写代码：<input type="checkbox" name="skill" value="">

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

        </div>

    </form>

</body>




10.上传文件


type为file时为上传文件，依赖enctype="multipart/form-data"属性，作用是把上传的文件一点一点的发给服务器，后台获取数据请看python篇




  <form action="test" method="post" enctype="multipart/form-data">

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

        <input type="submit" value="上传">

    </form>




11.输入内容或者选择内容重置


type为reset时，为重置，点击后重置当前from表单为默认值




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







												


											
html之input标签（11）的更多相关文章
	

    
						
  1. html <input>标签类型属性type(file、text、radio、hidden等)详细介绍
		
    html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...
    
		
    2. 
						
  2. 【整合】input标签JS改变Value事件处理方法
		
    某人需要在时间控件给文本框赋值时,触发事件函数.实现的效果: 1.文本框支持手工输入,通过用户输入修改值,手工输入结束后触发事件.阻塞在于失去焦点后才触发(输入过程中不触发事件) 2.通过JS方法修改 ...
    
		
    3. 
						
  3. Input标签使用整理
		
    0 写在前面 对于程序而言I/O是一个程序的重要组成部分.程序的输入.输出接口,指定了程序与用户之间的交互方式.对于前端开发而言,input标签也有着其重要地位,它为用户向服务端提交数据提供了可能.  ...
    
		
    4. 
						
  4. html5中form表单新增属性以及改良的input标签元素的种类
		
    在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...
    
		
    5. 
						
  5. 前端与后台可能需要使用交互的表单form，input标签
		
    前端与后台可能需要使用交互的表单标签 form表单和input标签 textarea文本域表单 select,option下拉列表表单 fieldset和legend组合表单 label标签 form ...
    
		
    6. 
						
  6. 关于input标签和placeholder在IE8，9下的兼容问题
		
    一. input常用在表单的输入,包括text,password,H5后又新增了许多type属性值,如url, email, member等等,考虑到非现代浏览器的兼容性问题,这些新的type常用在移 ...
    
		
    7. 
						
  7. angular  input标签只能单向传递数据的问题
		
    angularjs input标签只能单向传递数据的问题 <ion-view title = "{{roomName}}" style = "height:90%; ...
    
		
    8. 
						
  8. 全面剖析 <input> 标签  ------  HTML\HTML5
		
    <input>标签因其形式多样.功能强大,当之无愧成为了WEB前端开发人员最钟爱的元素之一.下面就来对<input>做一个全面的剖析: 标签定义: <input>  ...
    
		
    9. 
						
  9. input标签file的value属性IE兼容性问题
		
    在IE中input标签file的value属性是只读的,不能通过js来改变,如下代码在IE中就是无效的: var input = document.getElementById('file'); in ...
    
		
    10. 
						
  10. 一个input标签搞定含内外描边及阴影的按钮～
		
    自从怀孕以来,我就变得很是轻松,偶尔写一两个页面,或者偶尔调试一个两个bug,或者偶尔给做JS的同事打打下手,修改个bug什么......一个习惯于忙碌的工作的人,这一闲下来,感觉还真TM很不舒服-怎 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. extends的使用
			
    继承extends的使用 继承(extends):           继承让我们可以更好的实现类的扩展.           继承的使用要点:               1.父类也称作超类.基类. ...
    
			
    2. 
						
  2. Testing - 自动化测试的几个基础概念
			
    自动化测试框架与模型 一个自动化测试框架就是一个集成体系,在这一体系中包含测试功能的函数库.测试数据源.测试对象识别标准,以及种可重用的模块. 自动化测试框架在发展的过程中经历了几个阶段,模块驱动测试 ...
    
			
    3. 
						
  3. 厉害了，Spring Cloud for Alibaba 来了！
			
    最近,Spring Cloud 发布了 Spring Cloud Alibaba 首个预览版本:Spring Cloud for Alibaba 0.2.0. 大家都好奇,这和阿里巴巴有什么关系?莫非 ...
    
			
    4. 
						
  4. 史上最全阿里 Java 面试题总结
			
    以下为大家整理了阿里巴巴史上最全的 Java 面试题,涉及大量 Java 面试知识点和相关试题. JAVA基础 JAVA中的几种基本数据类型是什么,各自占用多少字节. String类能被继承吗,为什么 ...
    
			
    5. 
						
  5. ASP.NET Core 2.1 使用Docker运行
			
    重要提示,本文为 ASP.NET Core 2.1 如果你是 2.2 那么请将文中的镜像换为 microsoft/dotnet:2.2.0-aspnetcore-runtime 即可,其他操作一样 1 ...
    
			
    6. 
						
  6. HP-Socket v3.2.2
			
    ==========================================================================================v3.2.2 upg ...
    
			
    7. 
						
  7. mysql中主键和唯一键的区别
			
    区别项 primary key(主键) unique(唯一键约束) 唯一性 可以 可以 是否可以为空 不可以 可以 允许个数 只能有1个 允许多个 是否允许多列组合 允许 允许
    
			
    8. 
						
  8. mysql 多表删除
			
    删除用户数据,我们就需要删除有关用户的所有数据. 主表是有数据的,其他关联表不一定有数据,我们可以用left join 来关联删除的表. eg:table1 是主表,t2,t3是关联表. SELECT ...
    
			
    9. 
						
  9. java 学习基础知识点拾遗 导航页
			
    每种编程语言的知识点都是很多很杂的,java也是如此 相信很多人学习的过程中都是深一脚浅一脚,最基础的东西可能有些也不是非常确定 整理了最基本的一些知识点,可以说是java入门的-1层级别的,作为自己 ...
    
			
    10. 
						
  10. Java——代码块
			
    前言 在程序编写之中可以直接使用{...}定义的一段语句就是代码块.根据代码块的位置以及关键字的不同可以分为4种:普通代码块.构造块.静态块以及同步代码块(多线程相关).下面将先介绍前3种以及Java ...
    
			
    11.