一、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. Spring-boot和Spring-Cloud遇到的问题

    1.spring cloud 使用 feign 启动报错  错误信息 org/springframework/cloud/client/loadbalancer/LoadBalancedRetryFa ...

  2. 赵雅智_Swift（2）_swift常量和变量

    分号 Swift 并不强制要求你在每条语句的结尾处使用分号(;) 你打算在同一行内写多条独立的语句必需要用分号 let cat = "? ?? ? "; println(cat) ...

  3. 微信小程序 项目实战（一）生命周期 配置服务器信息 splash启动页

    步骤一:小程序 生命周期 //app.js App({ onLaunch: function () { //当小程序初始化完成时,会触发onLaunch(全局只触发一次) }, onShow: fun ...

  4. HDU 2317 Nasty Hacks

    Nasty Hacks Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tota ...

  5. java开始到熟悉70-71

    本次内容:file类 package array; /** * file类 */ import java.io.File; import java.io.IOException; public cla ...

  6. java zip压缩文件和文件夹

    public class FileUtil { /** * 压缩文件-File * @param out zip流 * @param srcFiles 要压缩的文件 * @param path 相对路 ...

  7. <bgsound> - 背景音乐

    摘要 项目 说明 形式 <bgsound src="..."> 支持 e2+ 标签省略 开始标签:必须,结束标签:无 ■ 说明 bgsound 是 background ...

  8. npm的安装和更新

    https://nodejs.org官网下载软件安装 验证是否安装,进入命令行 输入npm -v 这个是安装node自动带的工具 npm install npm@xxx 自动更新自己,后边跟版本号 n ...

  9. java设计模式----迭代器模式和组合模式

    迭代器模式: 提供一种方法顺序访问一个聚合对象中的各个元素,而又不暴露其内部的表示. 设计原则: 单一责任:一个类应该只有一个引起变化的原因 组合模式: 允许你将对象组合成树形结构来表现“整体/部分” ...

  10. 【健康生活】Google、百度之间的选择

    没有什么技术性的分析,仅仅是个人吐槽而已. 一般人遇到问题就会说一句"百度一下",说实话,百度在中国推广的真的非常不错,可谓是家喻户晓,搜索个八卦新闻,小文章,小电影什么的的确非常 ...