4、html的body内标签之input系列
一、input标签与form表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://ip:port/index" method="post">
<input type="text" name="user"/>
<input type="text" name="email" />
<input type="password" name="pwd"/>
<!--{'user'：'用户输入的用户’，'emai1'：'xx'，'pwd’：'xx'}-->
<input type="button" value="登录1" />
<input type="submit" value="登录2" />
</form>
</body>
</html>
说明：
#
<input>是一个输入标签；
表单使用表单标签 <form> 来设置，要提交内容必须有<form>标签； #
<form action="http://ip:port/index" method="post">
action="http://ip:port/index" ：表示当前表单中的内容提交给哪个页面进行处理；
method="post" ：表示当前表单提交的方式，常见的有get和post方式，默认是get提交； #
<input type="text" name="user"/> ：
<input type="text" name="email" />：
文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
name="user" 、name="email" 相当于为这个输入框设置一个值， #
<input type="password" name="pwd"/>：
密码字段通过标签<input type="password"> 来定义，不显示明文；
name="pwd" 相当于为这个输入框设置一个值， #
name="user" 、name="email"、name="pwd" 在内部会以字典的形式，发送给form action="http://ip:port/index"定义的URL，
后端会判断处理提交过去的数据；
如果是get请求，会在url里拼接处提交的数据；post请求则不会显示，会在内部传递过去；
#
<input type="button" value="登录1" />
<input type="submit" value="登录2" />
input type="button"：按钮，目前没有什么效果，只能点击，不能提交数据；
input type="submit"：将表单里的信息提交给<form>表单属性action所指向的地址；
二、单选框
<!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="go" />
</form>
</body>
</html>
说明：
#
首先说明<form>中的<div>、<p>等标签不会被提交； #
男：<input type="radio" name="gender" value="1" />
女：<input type="radio" name="gender" value="2"/>
input type="radio"：定义单选框；
name="gender"：所有单选框的name定义为相同的(互斥)，才能形成单选框；
value="1" 、value="2" 将value提交到后台，进行识别处理；
三、复选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<div>
<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" />
<p>请选择技能：</p>
Linux：<input type="checkbox" name="skill" />
python: <input type="checkbox" name="skill" />
</div>
<input type="submit" value="go" />
</form>
</body>
</html>
说明：
#
<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。 #
name="favor" value="1" checked="checked"
name="favor" value="2"
复选框的name都设置为相同的，不会互斥，为什么name要设置为相同呢？
因为可能有很多要复选的项目类型(爱好、技能等)，一个大的类型设置一个name，
然后再给每一项设置一个value，就可以根据name+value的方式提交数据，
如果给每一项设置一个name，就会很麻烦，不容易分辨； checked="checked"：设置默认值，默认就会被勾选上，可以设置多个，
单选框也可以用此方式设置默认值；
四、上传文件
<!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="file" name="fname" />
</div>
<input type="submit" value="go" />
</form>
</body>
</html>
说明：
#
input type="file" name="fname"
表示上传文件，可以选择本地文件；
name="fname" 获取文件名； #
<form enctype="multipart/form-data">
上传文件，依赖于form表单的此属性；
五、重置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form enctype="multipart/form-data">
<div>
<input type="text" name="user" />
</div>
<input type="submit" value="go" />
<input type="reset" value="重置" />
</form>
</body>
</html>
说明：
点击“重置”按钮，就会清空输入框或者选中的内容；
4、html的body内标签之input系列的更多相关文章
- html的body内标签之input系列2
一,input系列:name属性用于让后台拿数据.value 只是在屏幕上的显示. 1. input type='text' name='query' value="张三"(相当于 ...
- 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块级标签、行内标签、行内块级标签
<html><head lang="en"> <meta charset="UTF-8"> <title>< ...
- css块级标签，行内标签，行内块标签的转换（2）
css块级标签,行内标签,行内块标签的转换 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在基础1中,我详细讲 ...
- html:常见行内标签，常见块级标签,常见自闭合标签
本文内容: 常见行内标签 常见块级标签 常见自闭合标签 首发日期:2018-02-12 修改: 2018-04-25:删除了不常用的标签 常见行内标签: 什么是行内标签: 行内标签就是在页面内只占据刚 ...
- HTML开发之（块级标签，行内标签，行内块标签）
显示模式的特性: 主要分为两大类: 块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内 ...
- 关于html 中form表单的内标签和使用
表单标记 1.普通文本框: <input type=”text” name=”名称” value=”值”;不写value默认为空/> 2.密码框:<input type=”passw ...
随机推荐
- Tomcat服务器解析“GET /JavaWebDemo1/1.jsp HTTP/1.1”
(2)服务器收到http请求报文,返回http响应报文 Tomcat服务器解析“GET /JavaWebDemo1/1.jsp HTTP/1.1” Tomcat服务器解析“GET /JavaWebDe ...
- 【mac】mac上安装软件，报错 鉴定错误，但是安装包都是好的
出现这个问题, 原因解析: 不是你的安装包下载出错了或者下载失败了这种原因 而是你在打开这个安装包的时候,一定是让你输入密码,而你的密码没有输入正确 解决方式:重新开始打开这个软件的安装包 如下: 1 ...
- 【Kotlin】spring boot项目中，在Idea下启动，报错@Configuration class 'BugsnagClient' may not be final.
报错如下: Exception encountered during context initialization - cancelling refresh attempt: org.springfr ...
- 【paddle学习】词向量
http://spaces.ac.cn/archives/4122/ 关于词向量讲的很好 上边的形式表明,这是一个以2x6的one hot矩阵的为输入.中间层节点数为3的全连接神经网络层,但你看右 ...
- BUPT复试专题—寻找i*j=m的个数(2016)
题目描述 3*3的矩阵内容. 1 2 3 2 4 6 3 6 9 即a[i][j](1<=i<=n,1<=j<=n)=i*j. 问一个这样n*n的矩阵里面,里面m出现的次数. ...
- firefox os 开发模拟器1.4版本号安装开发具体解释
首先在使用firefox os 模拟器的时候必须先下载firefox 浏览器,这个是众多web开发人员必备的工具,下载地址firefox 浏览器 .在最新的官方版本号是1.5版的模拟器,可是如今还不是 ...
- YII RBAC基于角色的访问控制
基于角色的访问控制( Role-Based Access Control ),是一种简单的而又强大的集中访问控制.基于Yii Framework 的 authManager 组件实现了分等级的 RBA ...
- Elasticsearch 学习笔记 Elasticsearch及Elasticsearch head安装配置
一.安装与配置 1.到官网下载Elasticsearch,https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-5.6. ...
- MergeLinklist
写了一个合并有序链表,代码有点纠结啊.涉及到指针就是麻烦,DS课曹老师课件说linklist是DS的难点. . . 假设数组就非常easy了.链表就要小心. 里面遇到的一些情况.第一.最好是先确定l1 ...
- XML语法笔记
XML(可扩展标记语言) XML的特点: XML是一种标记语言,适合跨平台.跨语种信息交互XML被用于存储.传输数据XML可扩展性良好,没有预定义标签,需要用户自定义标签XML具有自我描述性XML采用 ...