HTML：表单标签

最新推荐文章于 2023-03-09 21:10:33 发布

original_

最新推荐文章于 2023-03-09 21:10:33 发布

阅读量211

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/original_/article/details/125692042

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

input标签

通过type属性设置不同的效果

<body>
    <!-- input标签通过type属性设置不同效果 -->
    <!-- 文本框（默认属性）type="text" -->
    昵称: <input type="text"><br><br>
    <!-- 密码框 type="password"-->
    密码: <input type="password"><br><br>
    <!-- 单选框 type="radio"-->
    性别: <input type="radio">男<br><br>
    <!-- 多选框 type="checkbox"-->
    爱好: <input type="checkbox">敲代码<br><br>
    <!-- 文件选择框 type="file-->
    <input type="file"><br><br>
    <!-- 提交按钮 -->
    <input type="submit">
    <!-- 重置按钮 -->
    <input type="reset">
    <!-- 普通按钮 -->
    <input type="button" value="普通按钮">
</body>

input标签属性

placeholder：占位符，提示用户文本框需要输入的内容

<!-- 文本框（默认属性）type="text" -->
昵称: <input type="text" placeholder="默认值"><br><br>
<!-- 密码框 type="password"-->
密码: <input type="password" placeholder="密码"><br><br>

单选框
name：分组
checked：默认选中

性别: <input type="radio" name="sex" checked>男
    <input type="radio"  name="sex">女

多选框
checked：默认选中

爱好: <input type="checkbox" checked>敲代码1
    <input type="checkbox" checked>敲代码2
    <input type="checkbox">敲代码3

文件
multiple：多文件选择

<input type="file" multiple>

按钮
结合form标签使用

button按钮标签

谷歌浏览器中button默认是提交按钮

<form>
    <input type="text" placeholder="默认值">
    <button type="submit">提交按鈕</button>
    <button type="reset">重置按鈕</button>
    <button type="button">普通按鈕</button>
</form>

select下拉菜单标签

<select>
    <option>选项一</option>
    <option selected>选项二</option>
    <option>选项三</option>
</select

textarea文本域标签

<!-- cols:文本域可见宽度 -->
<!-- rows:文本域可见行数 -->
<textarea cols="50" rows="20">
</textarea>

label标签

应用场景：绑定内容和标签

<!-- 点击label标签内容也会勾选多选框：
        1.标签内容通过for指定绑定的标签
        2.将需要绑定的标签卸载label标签内部
-->
爱好：<input type="checkbox" id="hobby1"><label for="hobby1">敲代码1</label>
<input type="checkbox" id="hobby2"><label for="hobby2">敲代码2</label>
<label><input type="checkbox" id="hobby3">敲代码3</label>

语义标签

没有语义的布局标签
div:独占一行
span:一行可以显示多个
有语义的标签
header:网页头部
nav:网页导航
footer:网页底部
aside:网页侧边栏
section:网页区块
article:网页文章

<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页的底部</footer>
<aside>网页侧边栏</aside>
<section>网页区块</section>
<article>网页文章</article>

字符实体

空格合并：html会将多个空白自动合并为一个空格，可以通过字符实体转义表示特殊符号

&nbsp;//空格
&lt;//小于
&gt;//大于

original_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML：表单标签

html：表单标签
复制链接

扫一扫

专栏目录