HTML 表单项标签 input

最新推荐文章于 2024-04-29 17:39:04 发布

稻田里展望者

最新推荐文章于 2024-04-29 17:39:04 发布

阅读量314

点赞数

分类专栏： Web前端技术文章标签： html 前端 css

本文链接：https://blog.csdn.net/weixin_46441425/article/details/122852995

版权

Web前端技术专栏收录该内容

86 篇文章 3 订阅

订阅专栏

表单项

input：可以通过type属性值，来改变元素展示的样式

type属性

text：文本输入框，默认值

text=“placeholder”：指定输入框的提示信息
text=“password”：密码输入框

text="radio "：单选框
1、要想实现单选，name的属性值必须是一样的
2、一般给单选框value的值
3、checked属性可以指定默认值

text=“checkbox”：复选框
2、一般给单选框value的值
3、checked属性可以指定默认值

file文件选择框
hidden 隐藏域，用于提交一些信息

label属性

指定输入项的文字描述信息
label的for属性一般和 input 的 id 属性值练习

按钮

提交按钮 submit
普通按钮 button
图片提交按钮 image
src路径指定图片的路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单项标签</title>
</head>
<body>
    <p>注册页面</p>
    <form action="#">
        <label for="name">姓名</label>  <input type="text" name="name" placeholder="请输入姓名" id="name"><br>
        <label for="usename">用户名</label>  <input type="text" name="usename" placeholder="请输入用户名" id="usename"><br>
        <label for="password">密码</label> <input type="password" name="password" id="password"><br>
        <!-- 单选框 -->
        性别
             <br>
             <input type="radio" name="gender" value="man"> 男<br>
             <input type="radio" name="gender" value="woman"> 女<br>

        <!-- 复选框 -->
        爱好 
        <input type="checkbox" name="hobby" value="chinese" >语文
        <input type="checkbox" name="hobby" value="math">数学
        <input type="checkbox" name="hobby" value="english">英语
        <input type="checkbox" name="hobby" value="physics">物理
        <input type="checkbox" name="hobby" value="history">历史
        <br>

        图片 <input type="file" name="file"><br>

        隐藏域 <input type="hidden" name="id" value="aaa"><br>

        取色器 <input type="color" name="color"><br>

        生日 <input type="date" name="brithday" >
        生日 <input type="datetime-local" name="brithday" ><br>

        年龄 <input type="number" name="age"><br>

        邮箱 <input type="email" name="email"><br>


        <!-- 普通的按钮 -->
        <input type="button" value="按钮"><br>

        <!-- 图片提交按钮 -->
        <input type="image" src="./image.jpg" width="20" ><br>

        <!-- 提交按钮 -->
        <input type="submit" value="注册">

    </form>   
</body>
</html>