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. python 调用c语言函数
			
    虽然python是万能的,但是对于某些特殊功能,需要c语言才能完成.这样,就需要用python来调用c的代码了 具体流程: c编写相关函数 ,编译成库 然后在python中加载这些库,指定调用函数.  ...
    
			
    2. 
						
  2. .Net 环境下比较各种数据库插入操作的性能
			
    1.简介 再说Windows的异步I/O操作前,先聊聊一些题外话,能帮助我们更好的理解异步I/O操作,常规的Web程序,当用户发起一次请求,当请求通过管道到达客户端的这个过程,会唤起一个线程池线程(后 ...
    
			
    3. 
						
  3. mysql 开发进阶篇系列 9 锁问题 (Innodb 行锁实现方式)
			
    一.概述 Innodb 行锁是通过给索引上的索引项加锁来实现的.这一点与(oracle,sql server)不同后者是通过在数据块中对相应的数据行加锁.这意味着只有通过索引条件检索数据,innodb ...
    
			
    4. 
						
  4. [疑难杂症]__关于cmd命令正确而显示不是内部指令的错误(ps:已解决)
			
    前言 事情的起因是因为我在使用上网程序的时候,运行程序发现端口被占用,这个当然我们知道要将占用的端口结束掉就行,但是显然我们首先要找到占用窗口的程序是什么,才方便在任务管理器中找到并结束掉它. 查找了 ...
    
			
    5. 
						
  5. 用dos命令导出一个文件夹里面所有文件的名字(装逼利器)
			
    首先,当然是在相关的文件夹打开dos命令窗口. 然后,输入如下命令:dir/b >a.txt 如果你非常了解dos命令,那么你一定会觉得这个东西简单到爆,而且我的理解和猜想都有些无知. 但如果你 ...
    
			
    6. 
						
  6. 2014--My Plan
			
    写于2014/1/10 从2014年开始我每年规划自己的life,每年10个plans. 回忆2013: 2013年,改变了很多.准确的说,那10个月,像个漫长的旅程,像个人生的转折点,应该可以这么说 ...
    
			
    7. 
						
  7. iOS逆向开发（4）：注入目标函数 | fishhook | MobileSubstrate | MSHookFunction | iOSOpenDev
			
    从获得APP的所有类声明,到锁定目标类与函数,现在是时候注入函数了. 所谓"注入函数",小程的意思是让APP执行到小程写的代码中,跟"钩子"的概念一致.小程把个 ...
    
			
    8. 
						
  8. 【原创】ucos信号量的操作及原理
			
    信号量的操作及原理   1.OSSemCreate创建信号量semaphore     在使用信号量之前,要先用OSSemCreate创建一个信号量,并通过返回的合法事件结构体指针使用信号量. OS_ ...
    
			
    9. 
						
  9. Maven三种仓库的配置
			
    转自:https://www.cnblogs.com/jack1995/p/6925879.html Maven三种仓库的配置 1 本地仓库的配置 在第一篇中我们介绍过,Maven的仓库有三类,这里不 ...
    
			
    10. 
						
  10. MyBatis源码解析（一）——执行流程
			
    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6603926.html 一.MyBatis简介 MyBatis框架是一种轻量级的ORM框架, ...
    
			
    11.