一、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系列的更多相关文章

  1. html的body内标签之input系列2

    一,input系列:name属性用于让后台拿数据.value 只是在屏幕上的显示. 1. input type='text' name='query' value="张三"(相当于 ...

  2. html的body内标签之input系列1

    1. Form的作用:提交当前的表单. 类似于去了银行提交的纸质单子,递到后台去办理相关业务. text,password只有输入的功能:button,submit只有点击的功能.想要把这些信息提交, ...

  3. 第一篇-Html标签中head标签，body标签中input系列，textarea和select标签

    第十四周课程(1-12章节) HTML 裸体 CSS   穿华丽衣服 Javascript 动起来 一 HTML (20个标签) 1.我们的浏览器是socket客户端 2.一套规则,浏览器认识的规则 ...

  4. 前端 html body 内标签之input

    可以做登录页面 text是文本输入框 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  5. css块级标签、行内标签、行内块级标签

    <html><head lang="en"> <meta charset="UTF-8"> <title>< ...

  6. css块级标签，行内标签，行内块标签的转换（2）

            css块级标签,行内标签,行内块标签的转换 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在基础1中,我详细讲 ...

  7. html:常见行内标签，常见块级标签,常见自闭合标签

    本文内容: 常见行内标签 常见块级标签 常见自闭合标签 首发日期:2018-02-12 修改: 2018-04-25:删除了不常用的标签 常见行内标签: 什么是行内标签: 行内标签就是在页面内只占据刚 ...

  8. HTML开发之（块级标签，行内标签，行内块标签）

    显示模式的特性: 主要分为两大类: 块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内 ...

  9. 关于html 中form表单的内标签和使用

    表单标记 1.普通文本框: <input type=”text” name=”名称” value=”值”;不写value默认为空/> 2.密码框:<input type=”passw ...

随机推荐

  1. mac 安装ANT

    http://blog.csdn.net/crazybigfish/article/details/18215439 1.下载ant:官网下载 当前最新版是Apache Ant 1.9.3,可以下载那 ...

  2. xgboost原理及并行实现

    XGBoost训练: It is not easy to train all the trees at once. Instead, we use an additive strategy: fix ...

  3. SolidEdge如何打开或关闭自动标注尺寸

    工具-聪慧-自动标注尺寸                    

  4. max-points-on-a-line——穷举

    Given n points on a 2D plane, find the maximum number of points that lie on the same straight line. ...

  5. Type cannot use 'try' with exceptions disabled

    cannot use ‘throw’ with exceptions disabled 在为 DragonBonesCPP/refactoring 的 cocos2d-x-3.2 demo 增加 An ...

  6. leetcode题解||Container With Most Water问题

    problem: Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate ...

  7. DW格式与布局

  8. erlang 中文编码显示乱码问题

    许久没做erlang开发了,近期有网友问到erlang的问题.就抽时间看下.问题是这种.模块有中文.将中文直接打印出来.shell下显示会出现乱码.但假设先将中文转成binary.就行正常显示出来. ...

  9. Java多线程面试题归纳

    1.多线程有哪几种实现方法?举个样例说明下线程的同步. (1)Java多线程有两种实现方式:继承Thread类和实现Runnable接口,Thread就是实现了Runnable接口. 两个最简单的线程 ...

  10. Python开发【第3节】【Python分支结构与循环结构】

    1.流程控制  流程: 计算机执行代码的顺序就是流程 流程控制: 对计算机代码执行顺序的管理就是流程控制 流程分类: 流程控制共分为3类: 顺序结构 分支结构/选择结构 循环结构 2.分支结构(if. ...