前端 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>

 

posted @ 2019-04-02 18:38  minger_lcm  阅读(547)  评论(0)    收藏  举报