一、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. 【Lucene】具体解释Lucene全文检索的信息写入与读取

    Lucene的大致结构图: 信息写入索引库的过程: 读取信息的过程: 以下是一个向索引库写入信息与读取信息的样例: public void testCreateIndex() throws Excep ...

  2. JDBC连接MySQL数据库的示例代码

    虽然老调,但有时也需要用一下,从网上找的原型修改了下放这. import java.sql.Connection; import java.sql.DriverManager; import java ...

  3. Android开发系列（二十一）：Spinner的功能和使用方法以及实现列表选择框

    Spinner是一个列表选择框.相当于弹出一个菜单供用户进行选择. Spinner继承AdapterView Spinnet支持的XML的属性: android:entries:使用数组资源设置该下拉 ...

  4. 使用squid架设自己的代理server

    主要參考了 http://blog.chinaunix.net/uid-20778906-id-540115.html Ubuntu下Squid代理server的安装与配置 1 安装 $ sudo a ...

  5. C#语言 ArrayList集合

  6. js 监控浏览器关闭(完美兼容chrome & ie & fire fox)

    var UnloadConfirm = {}; UnloadConfirm.MSG_UNLOAD = "数据尚未保存,离开后可能会导致数据丢失\n\n您确定要离开吗?"; Unlo ...

  7. Java实现HttpClient发送GET、POST请求（https、http）

    1.引入相关依赖包 jar包下载:httpcore4.5.5.jar    fastjson-1.2.47.jar maven: <dependency> <groupId>o ...

  8. VC实现趋势图绘制

    本文参考pudn上一个完整工程,在pudn搜索“50815867CurveDrawing”即可找到源代码.   上图是使用VS2010重写了该软件后的效果图,下面再贴出关键代码: // Plot.cp ...

  9. Kafka在Windows安装运行

    摘要:本文主要说明了如何在Windows安装运行Kafka 一.安装JDK 过程比较简单,这里不做说明. 最后打开cmd输入如下内容,表示安装成功 二.安装zooeleeper 下载安装包:http: ...

  10. 软件GUI测试中的关注点

    [摘要] 本文列数了软件黑盒测试过程中,在被测试软件中可能存在的常见软件问题.本文不会详细讨论基本的软件测试思想与常用技术,仅针对在软件黑盒测试过程中若干的问题做描述,并提供个人的参考测试意见与防范意 ...