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 ...
随机推荐
- vue2.0 常用的 UI 库
1.mint-ui 安装: npm install mint-ui --save 使用: main.js // MintUI组件库 import MintUI from 'mint-ui' impor ...
- 批量修改文件权限 和所有者 chown nobody:nobody * -R chmod 775 * -R
chown nobody:nobody * -R chmod 775 * -R
- c/c++中static和extern使用
c/c++中static和extern使用 在C/C++中static和extern都能够用来修饰函数和变量,可是是有差别的. 内部函数和内部变量:仅仅能在文件内使用的函数和变量. 外部函数和外部变量 ...
- 理解CSS中的BFC(块级可视化上下文)[译]
开篇 一些元素,如float元素,如position为absolute,inline-block,table-cell或table-caption的元素,以及overflow属性不为visible的元 ...
- Arrays.asList基本用法
目录 说明 基本用法 陷阱 改观 说明 asList 是 java.util.Arrays 类的一个方法 public static <T> List<T> asList(T. ...
- 让 Logo "飞" 出屏幕
让 Logo "飞" 出屏幕 推荐序 本文介绍了一种思路,即利用矢量工具来生成动画的关键代码,然后进一步制作成完整的动画效果,感谢作者授权转载. 作者介绍:一缕殇流化隐半边冰霜 ...
- (转)CSS3全局实现所有元素的内边距和边框不增加
全局设置 border-box 很好,首先它符合直觉,其次它可以省去一次又一次的加加减减 它还有一个关键作用——让有边框的盒子正常使用百分比宽度.但是使用了 border-box 可能会与一些依赖默认 ...
- XML复习笔记（复习资料为菜鸟教程里的XML教程）
XML 指可扩展标记语言(eXtensible Markup Language) XML 的设计宗旨是传输数据,而不是显示数据. XML 标签没有被预定义.您需要自行定义标签. XML 被设计为具有自 ...
- querying rpm database
Call dbMatch on a transaction set to create a match iterator. As with the C API, a match iterator al ...
- delphi 八字排盘源码（post数据以后，又分析数据）
procedure TForm1.Button14Click(Sender: TObject);var ls: TStringList; lstr: string; lss: TMemorySt ...