input标签用于接收用户输入。可以利用input 可以做登录页面

input标签是行内块标签

<input> 元素会根据不同的 type 属性，变化为多种形态。

name属性：表单点击提交按钮时，提交form表单时候，在url上显示， 是一个key-value形式，注意和id的区别

type属性值 表现形式 对应代码
text 单行输入文本 <input type=text" />
password 密码输入框 <input type="password"  />
date 日期输入框 <input type="date" />
checkbox 复选框 <input type="checkbox" checked="checked"  />
radio 单选框 <input type="radio"  />
submit 提交按钮 <input type="submit" value="提交" />
reset 重置按钮 <input type="reset" value="重置"  />
button 普通按钮 <input type="button" value="普通按钮"  />
hidden 隐藏输入框 <input type="hidden"  />
file 文本选择框 <input type="file"  />

 type属性

text 文本输入框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <div>

        <form>

            <div>

                <input type="text">

            </div>

        </form>

    </div>

</body>

</html>

在里面输入内容

password输入密码类型，可以输入密码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <div>

        <form>

            <div>

                <label for="user">用户名:</label>

                <input id="user" name="username" type="text">

            </div>

            <div>

                <label for="pwd">密码:</label>

                <input id="pwd" name="password" type="password">

            </div>

        </form>

    </div>

</body>

</html>

placeholder属性 标签上显示内容

button是普通按钮，只是一个按钮装饰用，需要配合Javascript使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <div>

        <form>

            <div>

                <label for="user">用户名:</label>

                <input id="user" name="username" type="text" placeholder="请输入用户名">

            </div>

            <div>

                <label for="pwd">密码 :</label>

                <input id="pwd" name="password" type="password" placeholder="请输入密码">

            </div>

            <input type="button" value="提交">

        </form>

    </div>

</body>

</html>

value 为按钮加上文字

submit是提交按钮,
可以把form表单提交到后台或者指定url，提交form表单使用type="submit"按钮
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <div>

        <form>

            <div>

                <label for="user">用户名:</label>

                <input id="user" name="username" type="text" placeholder="请输入用户名">

            </div>

            <div>

                <label for="pwd">密码 :</label>

                <input id="pwd" name="password" type="password" placeholder="请输入密码">

            </div>

            <!-- submit是提交按钮,可以把form表单提交到后台或者指定url

            提交form表单使用type=submit按钮

            -->

            <input type="submit" value="提交">

        </form>

    </div>

</body>

</html>

前端 HTML body标签相关内容 常用标签 表单标签 form里面的 input标签介绍的更多相关文章

  1. 前端 HTML body标签相关内容 常用标签 表单标签 form

    表单标签 form 表单是一个包含表单元素的区域表单元素是允许用户在表单中输入内容,比如:文本域(textarea).输入框(input).单选框() 表单的作用 form标签作用是把用户输入数据信息 ...

  2. 前端 HTML body标签相关内容 常用标签 表单标签 form 表单控件分类

    表单控件分类 input标签: input标签 type属性的text,password,button按钮,submit按钮 input标签placeholder属性 标签上显示内容 input标签 ...

  3. 前端 HTML body标签相关内容 常用标签 表单标签 form里面的 label标签介绍

    定义:<label> 标签为 input 元素定义标注(标记). label标签功能:关联input标签文本与表达元素,点击input标签文本时,如同点击表单元素一样. label标签是行 ...

  4. 前端 HTML body标签相关内容 常用标签 表格标签 table

    表格标签 table 表格由<table> 标签来定义.每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由<td>标签定义).字母 td 指表 ...

  5. 前端 HTML body标签相关内容 常用标签 段落标签 p标签

    段落标签 <p>,paragraph的简写.定义段落,默认段落之间有间隔的 浏览器展示特点: 跟普通文本一样,但我们可以通过css来设置当前段落的样式 是否又独占一行呢? 答案是的 块级元 ...

  6. 前端 HTML body标签相关内容 常用标签 标题标签 h1-h6

    标题标签 h1~h6 <h1> - <h6> 标签可定义标题.<h1> 定义最大的标题.<h6> 定义最小的标题. 由于 h 元素拥有确切的语义,因此请 ...

  7. 前端 HTML body标签相关内容 常用标签 列表标签 ul，ol,li

    列表标签 ul,ol,li ul.ol.li标签 都属于块级标签,独占一行 网站页面上一些列表相关的内容比如说物品列表.人名列表等等都可以使用列表标签来展示.通常后面跟<li>标签一起用, ...

  8. 前端 HTML body标签相关内容 常用标签 图片标签 <img/>

    图片标签 <img/> 一个网页除了有文字,还会有图片.我们使用<img/>标签在网页中插入图片. <img/> 是单闭合标签 语法:<img src=&qu ...

  9. 前端 HTML body标签相关内容 常用标签 超链接标签 a标签

    超链接标签 <a> 超级链接<a>标记代表一个链接点,是英文anchor(锚点)的简写.它的作用是把当前位置的文本或图片连接到其他的页面.文本或图像,也可以是相同网页上的不同位 ...

随机推荐

  1. 三、主流区块链技术特点及Hyperledger Fabric V1.0版本特点

    一.Hyperledger fabric V1.0 架构 1.逻辑架构: 2.区块链网络 3.运行时架构 二.架构总结 1.架构要点 分拆Peer的功能,将Blockchain的数据维护和共识服务进行 ...

  2. 二叉树转换成森林&amp;森林变成二叉树

    一,树转换成二叉树 1,将全部兄弟结点连起来; 2,保留第一个兄弟结点与父节点的连接,断开其它兄弟结点与父节点的连接,然后以根节点为轴依照顺时针方向旋转45度 watermark/2/text/aHR ...

  3. 【SQLSERVER】How to check current pool size

    SELECT des.program_name , des.login_name , des.host_name , COUNT(des.session_id) [Connections] FROM ...

  4. windows下特殊字符无法用来命名

    原则上可以利用键盘输入的英文字母.符号.空格.中文等均可以作为合法字符,但由于以下字符由系统保留它用,因此不能用在文件命名中: :   /  \  ?  *  “  <  >  |  注: ...

  5. vim.sh

    #!/bin/bash #https://github.com/txthinking mkdir /tmp/_ curl https://raw.githubusercontent.com/txthi ...

  6. 【死磕jeesite源码】Jeesite配置定时任务

    一.主要是注意XML文件中设置3个地方和类文件中配置 第一步配置: 第二步配置:注解扫描 第三步配置:开启任务 类中注解配置:如下 @Service 或者Component @Lazy(false) ...

  7. linux相关(3)

    1. shell环境变量 能够存在于本shell进程及其子shell进程的变量.变量可以从父shell进程传递给子shell进程,而不能反过来,因此环境变量在子shell进程中无论如何修改都不会影响到 ...

  8. 企业应用打包的时候 修改ipa包的bundle identifier

    1.将ipa包后缀改为.zip,解压,之后打开包文件,找到info.plist文件后,修改相应的项就可以了.把修改后的文件重新压缩成zip,把zip改为ipa,替代原来的ipa,就可以了. 解决这个问 ...

  9. db2 v11 安装测试

    一.准备环境: 修改/etc/hosts如下配置: #vi /etc/hosts 127.0.0.1    localhost 修改系统内核参数 # vi /etc/sysctl.conf kerne ...

  10. 使用hive分析nginx访问日志方法

    以下案例是使用hive分析nginx的访问日志案例,其中字段分隔通过正则表达式匹配,具体步骤如下: 日志格式: 192.168.5.139 - - [08/Jun/2017:17:09:12 +080 ...