html的body内标签之input系列2
一，input系列：name属性用于让后台拿数据。value 只是在屏幕上的显示。
1. input type='text' name='query' value="张三"(相当于默认值)
2. input type='password' name='XXX' value="张三"(相当于默认值)
3. input type='button' value='登录'--按钮
4. input type='submit' value='提交'---提交按钮，提交当前表单，必不可少
5. input type='radio' 单选框 value, name属性（如果name相同则表示互斥）
6. input type='checkbox' 复选框 value,name属性（批量获取数据）
7. input type='file' 依赖form表单的一个属性 enctype="multipart/form-data" 表示把上传的文件一点一点地发给服务器
8. input type='submit' name='提交' 提交
input type='submit' name='重置' 重置
input type='reset' 重置所有用户选择的值
9. select标签 --name, 内部option value,提交到后台；显示多个用size；控制大小用size; size指的是显示的选择框的大小。多选用multiple; 分级显示用optgroup
二，一个实例理解一下提交的过程：https://www.sogou.com/web?query=长城
上节课讲的是提交到一个自己编写的服务器的过程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="https://www.sogou.com/web">
<input type="text" name="query"/>
<input type="submit" value="搜索"/>
</form> </body>
</html>
运行结果：
输入要搜索的内容：
点击搜索：
三，<input> 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
input type='radio'单选框 value, name属性（如果name相同则表示互斥），value值要提交到后台。如果name相同，则提交value值到后台。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<div>
<p>请选择性别：</p>
男：<input type="radio" name="gender" value="1"/>
女：<input type="radio" name="gender" value="2"/>
</div>
<input type="submit" value="提交"/>
</form> </body>
</html>
运行结果：
四，checkbox是复选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<div>
<p>请选择性别：</p>
男：<input type="radio" name="gender" value="1"/>
女：<input type="radio" name="gender" value="2"/>
<p>爱好：</p>
篮球：<input type="checkbox" name="favor" value="1"/>
足球：<input type="checkbox" name="favor" value="2"/>
网球：<input type="checkbox" name="favor" value="3"/>
皮球：<input type="checkbox" name="favor" value="4"/>
台球：<input type="checkbox" name="favor" value="5"/>
<p>技能：</p>
Linux：<input type="checkbox" name="skill" value="1"/>
Python：<input type="checkbox" name="skill" value="2"/>
</div>
<input type="submit" value="提交"/>
</form> </body>
</html>
运行结果：
五，checked="checked" 设置默认值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<div>
<p>请选择性别：</p>
男：<input type="radio" name="gender" value="1"/>
女：<input type="radio" name="gender" value="2"/>
<p>爱好：</p>
篮球：<input type="checkbox" name="favor" value="1" checked="checked"/>
足球：<input type="checkbox" name="favor" value="2"/>
网球：<input type="checkbox" name="favor" value="3"/>
皮球：<input type="checkbox" name="favor" value="4"/>
台球：<input type="checkbox" name="favor" value="5"/>
<p>技能：</p>
Linux：<input type="checkbox" name="skill" value="1"/>
Python：<input type="checkbox" name="skill" value="2"/>
</div>
<input type="submit" value="提交"/>
</form> </body>
</html>
运行结果：
六， input type='file' 依赖form表单的一个属性 enctype="multipart/form-data" 表示把上传的文件一点一点地发给服务器
后台根据filename 去获取到文件名。
enctype是encodetype的缩写，翻译成中文就是编码类型的意思！multipart/form-data是指表单数据有多部分构成：既有文本数据，
又有文件等二进制数据的意思。另外需要注意的是：默认情况下，enctype的值是application/x-www-form-urlencoded，不能用于文件上传；
只有使用了multipart/form-data，才能完整的传递文件数据。对于文件上传工作，其实是在前端完成的，即，在php，java等语言处理之前，
文件其实就已经被上传到服务器了，服务器脚本语言的作用不过是将这些临时文件持久化而已！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form enctype="multipart/form-data">
<div>
<p>请选择性别：</p>
男：<input type="radio" name="gender" value="1"/>
女：<input type="radio" name="gender" value="2"/>
<p>爱好：</p>
篮球：<input type="checkbox" name="favor" value="1" checked="checked"/>
足球：<input type="checkbox" name="favor" value="2"/>
网球：<input type="checkbox" name="favor" value="3"/>
皮球：<input type="checkbox" name="favor" value="4"/>
台球：<input type="checkbox" name="favor" value="5"/>
<p>技能：</p>
Linux：<input type="checkbox" name="skill" value="1"/>
Python：<input type="checkbox" name="skill" value="2"/>
<p>上传文件</p>
<input type="file" name="filename"/>
</div>
<input type="submit" value="提交"/>
</form> </body>
</html>
运行结果：
七，<input type="reset" value="重置"/> 重置按钮，除了默认值，其他的都会被清空
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form enctype="multipart/form-data">
<div>
<p>请选择性别：</p>
男：<input type="radio" name="gender" value="1"/>
女：<input type="radio" name="gender" value="2"/>
<p>爱好：</p>
篮球：<input type="checkbox" name="favor" value="1" checked="checked"/>
足球：<input type="checkbox" name="favor" value="2"/>
网球：<input type="checkbox" name="favor" value="3"/>
皮球：<input type="checkbox" name="favor" value="4"/>
台球：<input type="checkbox" name="favor" value="5"/>
<p>技能：</p>
Linux：<input type="checkbox" name="skill" value="1"/>
Python：<input type="checkbox" name="skill" value="2"/>
<p>上传文件</p>
<input type="file" name="filename"/>
</div>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</form> </body>
</html>
运行结果：
html的body内标签之input系列2的更多相关文章
- 4、html的body内标签之input系列
一.input标签与form表单 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- html的body内标签之input系列1
1. Form的作用:提交当前的表单. 类似于去了银行提交的纸质单子,递到后台去办理相关业务. text,password只有输入的功能:button,submit只有点击的功能.想要把这些信息提交, ...
- 第一篇-Html标签中head标签，body标签中input系列，textarea和select标签
第十四周课程(1-12章节) HTML 裸体 CSS 穿华丽衣服 Javascript 动起来 一 HTML (20个标签) 1.我们的浏览器是socket客户端 2.一套规则,浏览器认识的规则 ...
- 前端 html body 内标签之input
可以做登录页面 text是文本输入框 <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- css块级标签，行内标签，行内块标签的转换（2）
css块级标签,行内标签,行内块标签的转换 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在基础1中,我详细讲 ...
- HTML的BODY内标签介绍
一.基本标签 <body> <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除线& ...
- 〇一——body内标签之交互输入标签一
今天来搞一下body内的input标签 在一般的网页中,我们经常会遇到一些交互界面,比如注册.登录.评论等环境.在这些交互界面里最常使用的就是input标签. 一.input标签基本使用 input标 ...
- css块级标签、行内标签、行内块级标签
<html><head lang="en"> <meta charset="UTF-8"> <title>< ...
- html:常见行内标签，常见块级标签,常见自闭合标签
本文内容: 常见行内标签 常见块级标签 常见自闭合标签 首发日期:2018-02-12 修改: 2018-04-25:删除了不常用的标签 常见行内标签: 什么是行内标签: 行内标签就是在页面内只占据刚 ...
随机推荐
- Webservice HTTP
由于项目需要:自己写了一个WebserviceDemo,把遇到的问题记下来. 方式一 :使用代理类来访问Webservice,此方式不讲解,感觉复杂(神坑). (生成的代理路径 C:\Users\ad ...
- HTTP请求中get和post的区别是什么
GET和POST是Http请求中最常用的两种请求方法 首先介绍GET与POST的差异: (1)GET请求资源数据,POST向服务器传递需要处理的数据 (2)GET传递数据大小不超过2kb,POST没有 ...
- 制作一个App的完整流程是哪些
APP开发流程其实并不复杂,但是对于客户来说,.一般移动APP开发都离不开UI设计师.前端开发.后端开发.测试专员.产品经理等,由于他们的工作性质都不一样,我们且先把APP软件开发项目分为三个阶段: ...
- 第四篇 与Flask相关的插件（flask-session、wtforms）
公司中使用SQL的种方式: 1. 写Django:ORM(关系对象映射), 2. 写Flask和其他:有两种方式: (1) 原生SQL:使用原生SQL有两种选择: A. pymysql (python ...
- 【SpringCloud】第七篇: 高可用的分布式配置中心(Spring Cloud Config)
前言: 必需学会SpringBoot基础知识 简介: spring cloud 为开发人员提供了快速构建分布式系统的一些工具,包括配置管理.服务发现.断路器.路由.微代理.事件总线.全局锁.决策竞选. ...
- ConfigHelpers
--默认值可以不传 local ConfigHelpers = {} --设置物体高亮 target:设置对象 isLigth:是否高亮 seeThrough:是否穿透(默认为true,穿透) sta ...
- Unity OBB分包(基础APK+OBB) 与apk签名
1.OBB (Opaque Binary Blob)文件格式,是安卓游戏通用数据包.在一些大型游戏上较为常见,同时还附以Data文件,亦或是md5.dat文件出现 产生原因:由于某些平台对于apk上传 ...
- （C#）原型模式—深复制与浅复制
1.原型模式 用原型实例指定创建对象的实例,并且通过拷贝这些原型创建新的对象. *原型模式隐藏了创建对象的细节,提高了性能. *浅复制:被复制对象的所有变量都含有与原来对象相同的值,而且所有对其他对象 ...
- 深入理解eos账户体系 active和action
在eos中,账户是一个非常重要的概念. 账户分为两部分组成 一种是active 一种是action. 智能合约本质上来讲就是一个action加上一个回馈脚本程序.任何智能合约都有这俩个部分组成. 那么 ...
- Case 降序升序排列
select nc.Class_Name,hn.home_news_id,hn.hemo_id,hn.hemo_Date, hn.hemo_title,hemo_order from Hemo_New ...