html之input标签（11）
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）的更多相关文章
- html <input>标签类型属性type(file、text、radio、hidden等)详细介绍
html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...
- 【整合】input标签JS改变Value事件处理方法
某人需要在时间控件给文本框赋值时,触发事件函数.实现的效果: 1.文本框支持手工输入,通过用户输入修改值,手工输入结束后触发事件.阻塞在于失去焦点后才触发(输入过程中不触发事件) 2.通过JS方法修改 ...
- Input标签使用整理
0 写在前面 对于程序而言I/O是一个程序的重要组成部分.程序的输入.输出接口,指定了程序与用户之间的交互方式.对于前端开发而言,input标签也有着其重要地位,它为用户向服务端提交数据提供了可能. ...
- html5中form表单新增属性以及改良的input标签元素的种类
在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...
- 前端与后台可能需要使用交互的表单form，input标签
前端与后台可能需要使用交互的表单标签 form表单和input标签 textarea文本域表单 select,option下拉列表表单 fieldset和legend组合表单 label标签 form ...
- 关于input标签和placeholder在IE8，9下的兼容问题
一. input常用在表单的输入,包括text,password,H5后又新增了许多type属性值,如url, email, member等等,考虑到非现代浏览器的兼容性问题,这些新的type常用在移 ...
- angular input标签只能单向传递数据的问题
angularjs input标签只能单向传递数据的问题 <ion-view title = "{{roomName}}" style = "height:90%; ...
- 全面剖析 <input> 标签 ------ HTML\HTML5
<input>标签因其形式多样.功能强大,当之无愧成为了WEB前端开发人员最钟爱的元素之一.下面就来对<input>做一个全面的剖析: 标签定义: <input> ...
- input标签file的value属性IE兼容性问题
在IE中input标签file的value属性是只读的,不能通过js来改变,如下代码在IE中就是无效的: var input = document.getElementById('file'); in ...
- 一个input标签搞定含内外描边及阴影的按钮～
自从怀孕以来,我就变得很是轻松,偶尔写一两个页面,或者偶尔调试一个两个bug,或者偶尔给做JS的同事打打下手,修改个bug什么......一个习惯于忙碌的工作的人,这一闲下来,感觉还真TM很不舒服-怎 ...
随机推荐
- TS - 问题分析与处理的一般性方法
本文是对解决问题的一些方法内容的改写与补充! 1 接触与了解 从总体着眼,从细节入手! 确认基本相关信息是必须执行的首要环节,也是后续处理问题的基础. 如果无法清楚地辨别或陈述问题的基本信息,那么,此 ...
- 安卓视频播放器（VideoView）
VideoView是安卓自带的视频播放器类,该类集成有显示和控制两大部分,在布局文件中添加VideoView然后在java文件中简单的调用控制命令,即可实现本地或者网络视频的播放.本章实现视频的居中播 ...
- python-图像处理（映射变换）
做计算机视觉方向,除了流行的各种深度学习算法,很多时候也要会基础的图像处理方法. 记录下opencv的一些操作(图像映射变换),日后可以方便使用 先上一张效果图 图二和图三是同一种方法,只是变换矩阵不 ...
- [原创]K8Cscan插件之端口扫描C#源码
[原创]K8 Cscan 大型内网渗透自定义扫描器 https://www.cnblogs.com/k8gege/p/10519321.html Cscan简介:何为自定义扫描器?其实也是插件化,但C ...
- 在vue 中使用 less
1.安装 npm install --save-dev less less-loader npm install --save-dev style-loader css-loader 先在index. ...
- 原生js ajax请求
什么是ajax AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新. 这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新, ...
- 微信小程序 WXS实现json数据需要做过滤转义（filter）
前言 最近有在做小程序开发,在开发的过程中碰到一点小问题,描述一下先. 本人在职的公司对于后台获取的 json 数据需要做过滤转义的很多,不同的状态码会对应不同的文字,但是在微信小程序中又没有类似 v ...
- 【原创】关于Git暂存区的理解
关于Git暂存区的理解 暂存区可以说是Git的三大重要的区域之一,另外两个分别是工作目录和Git仓库,所以说对暂存区的深入理解可以帮助我们理解很多Git命令背后隐藏的工作原理.今天,本文将以 ...
- JsonBuilder初出茅庐
互联网这股东风不久前刮到了甘凉国,国王老甘独具慧眼,想赶紧趁着东风未停大力发展移动互联网,因为他笃信布斯雷的理论:“站在风口上,猪都能飞起来”.无奈地方偏僻落后,国内无可用之才啊.老甘一筹莫展的低头凝 ...
- Java Web中提交表单之后跳转到WebContent目录下的子目录里的jsp文件
最近在做一个系统,需要完成登录动能进行跳转到另一个页面.在这个项目里面,我把 jsp,css,js文件都统一放在 WebContent 目录下的一个 WebPage 里面. 按照以前的习惯,写好了 s ...