一、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. Go -- 判断chan channel是否关闭的方法

    如果不判断chan是否关闭 Notice: 以下代码会产生死循环 代码如下: package main import ( "fmt" ) func main() { c := ma ...

  2. zabbix之Low-level discovery(自动发现)

    功能: 自动发现挂载点并自动监控 自动发现网卡并自动监控 创建自动发现挂载点并监控 功能 假如要在monitor_linux模板中创建自动发现挂载点的功能 配置-->模板-->选择模板-- ...

  3. POJ 3928 Ping pong 树状数组模板题

    開始用瓜神说的方法撸了一发线段树.早上没事闲的看了一下树状数组的方法,于是又写了一发树状数组 树状数组: #include <cstdio> #include <cstring> ...

  4. 安卓2.3 js解析问题 split()

    安卓2.3版本号解析错误,split和parseInt都会把09和08都解析成0,07下面解析没有问题.解决的方法是直接取个位数. function getYMD(yMd){ var dArray=n ...

  5. java开始到熟悉60

    本次主题:多维数组 1,多维数组的初始话有三种:默认初始化.静态初始化.动态初始化. 这里只讲解静态初始化: 这里以二位数组为例,实际应用中,一维用得最多,二维次之,三维以及三维以上几乎很少使用,而且 ...

  6. HTML URL编码规则

    将空格转换为加号(+) 对0-9,a-z,A-Z之间的字符保持不变 对于所有其他的字符,用这个字符的当前字符集编码在内存中的十六进制格式表示,并在每个字节前加上一个百分号(%).如字符“+”用%2B表 ...

  7. 小博客| 登录 | 注册 | 留言 | 提Bug 小博客

     浏览(1502)  赞(29) 一直以来都想开发一个自己的网站,总想做一个网站然后让千千万万的人去访问,去使用,然后收到热烈的好评, 再然后某某著名机构有意投资我的网站(其实收购也是没有问题的), ...

  8. oracle spm使用1

    oracle11g new feature SPM 有助于保持sql的语句特性,仅仅同意运行性能提高的运行计划. 它不同于stored outlines, spm在于稳定sql性能,而store ou ...

  9. 第8章4节《MonkeyRunner源代码剖析》MonkeyRunner启动执行过程-启动AndroidDebugBridge

    上一节我们看到在启动AndroidDebugBridge的过程中会调用其start方法,而该方法会做2个基本的事情: 715行startAdb:开启AndroidDebugBridge 722-723 ...

  10. vue 开发前准备工作

    工欲善其事,必先利其器. 第一步,选择一个合适的编辑器: 看vue官网上,有推荐用HBuilder X这个编辑器,这个我在开发微信小程序的时候,就是用的这个编辑器,还可以,挺好用的,也可以用git做版 ...