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

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标签介绍

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