＜input＞元素全部用法和属性

卷小白

已于 2023-04-11 19:41:23 修改

阅读量2.7k

点赞数 5

分类专栏： HTML5 文章标签： css3 前端 css

于 2023-04-11 19:37:20 首次发布

本文链接：https://blog.csdn.net/m0_71469120/article/details/130086373

版权

HTML5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.<input>--单行文本输入框

最简单的<input>元素用于单行输入

<body>
    <input>
</body>

2.type属性

2.1 type="text"(默认)

<body>
    <input type="text">
</body>

2.2 type="password"----此时输入的内容会被小圆点代替,防止密码被偷窥.

<body>
    <input type="password">
</body>

2.3 type="number"---此时输入类容被限制为数字.

<body>
    <input type="number">
</body>

2.4 type="color"---此时input框成为了色块,可以调节各种颜色

<body>
    <input type="color">
</body>

2.5 type="button"---此时的input不是输入框,而是一个按钮

<body>
    <input type="button">
    <button></button>
    <!-- 效果类似,但是<button>具有<input type="button">相同的作用但是在可操控性方面更加强大-->
</body>

2.6 type="checked"---此时的input不是输入框,而是多选框

<body>
    <input type="checkbox">
    <!-- checked表示为选中状态 -->
    <input type="checkbox" checked>
</body>

2.7 type="radio"---此时input为单选框,选择一方,另外一方就会被取消选择.

<body>
    <!-- checked表示为选中状态 -->
    <input type="radio" name="gender" checked>男
    <input type="radio" name="gender">女
    <!-- name属性表示两个单选框是指向什么方面的选择 -->
</body>

2.8 type="range"---此时input为范围区间条

<body>
    <input type="range" min="0" max="100">
    <!-- 设置[min,max]的区间 -->
    <input type="range" min="0" max="100" step="10">
    <!-- 此时每次移动为10 -->
</body>

2.9 type="file",此时<input>为文件选择器

<body>
    <input type="file">
    <!-- 点击选择文件,会弹出文件选择器 -->
</body>

2.10 type="image"---此时用图片为提交按钮

<body>
    <!-- src为图片文件的地址 -->
    <!-- width为图片大小 -->
    <input type="image" width="200" src="./image/JavaScript.png">
</body>

2.11 type="data"---日期选择器

<body>
    <input type="date">
</body>

2.12 type="datetime-local"---与date类似具体到分钟

<body>
    <input type="datetime-local">
</body>

2.13 type="month"---用于年份和月份的显示

<body>
    <input type="month">
</body>

2.14 type="week"---用于周数显示

<body>
    <input type="week">
</body>

2.15 type="time"---用于时间的输入,分秒

<body>
    <input type="time">
</body>

2.16 type="email" 和 type="submit"---email,submit与<form>表单元素配合验证邮箱是否正确.

submit单独没有意义,通常与<from>元素配合使用,<from>我们后面会讲到.

<body>
    <form>
        <input type="email">
        <input type="submit" value="提交">
    </form>
</body>

2.17 type="reset"与submit与<from>元素使用

value为input的值显示在input框内

reset是将表单重置为初始值

submit是提交表单

<body>
    <form>
        用户名: <input type="text">
        密码: <input type="password">
        <input type="submit" value="提交">
        <input type="reset" value="重置表单">
    </form>
</body>

3.placeholder---占位字符

当输入框为空的时候,内部显示,提示用户输入

<body>
  <input type="text" placeholder="请输入">
</body>

当<input>有value时会覆盖placeholder

<body>
  <input type="text" placeholder="请输入" value="你好">
</body>

4.autofocus---自动聚焦

当打开网页时,鼠标光标自动进入输入框中,不要点击输入框再输入了

<body>
  <input type="text" placeholder="请输入" autofocus>
</body>

卷小白

关注

5
点赞
踩
22

收藏

觉得还不错? 一键收藏
打赏
0
评论
＜input＞元素全部用法和属性

元素的所有属性,type的种类,的placeholder,的autofocus
复制链接

扫一扫

专栏目录