前端秘法基础式(HTML)(第二卷)

目录

一.表单标签

1.表单域

2.表单控件

2.1input标签

2.2label/select/textarea标签

2.3无语义标签

三.特殊字符


一.表单标签

用来完成与用户的交互,例如登录系统

1.表单域

<form>通过action属性,将用户填写的数据转交给服务器

2.表单控件

2.1input标签

type属性:text文本输入框

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是标题</title>
</head>
<body>
    <!-- 这里是注释 -->
    <form action = "">
        姓名<input type = "text">
    </form>
</body>
</html>

type = password

这种情况下对用户输入的数据具有加密效果

type = radio单选框

html 复制代码
<body>
    <!-- 这里是注释 -->
    <form action = "">
        姓名<input type = "text">
        <br>
        密码<input type = "password">
        <br>
        性别<input type = "radio" name = "gender">男
        <input type = "radio" name = "gender">女
    </form>
</body>

附加相同的name属性,只能选择一个,当加入checked = "checked"则可以默认一个选项

type = checkbox复选框可以选择多个选项

html 复制代码
 <form action = "">
        姓名<input type = "text">
        <br>
        密码<input type = "password">
        <br>
        性别<input type = "radio" name = "gender" checked = "checked">男
        <input type = "radio" name = "gender">女
        <br>
        爱好
        <input type = "checkbox">吃饭
        <input type = "checkbox">睡觉
        <input type = "checkbox">打豆豆
    </form>

type = button普通按钮(配合JS监听用户操作)

html 复制代码
<form action = "">
        姓名<input type = "text">
        <br>
        密码<input type = "password">
        <br>
        性别<input type = "radio" name = "gender" checked = "checked">男
        <input type = "radio" name = "gender">女
        <br>
        爱好
        <input type = "checkbox">吃饭
        <input type = "checkbox">睡觉
        <input type = "checkbox">打豆豆
        <br>
        <input type = "button" value="                     登录                     " onclick="alert('登录成功')">
    </form>

type = submit/reset提交/重置

html 复制代码
<form action = "https://www.baidu.com/">
        姓名<input type = "text">
        <br>
        密码<input type = "password">
        <br>
        <input type = "submit">
        <input type = "reset">
    </form>

2.2label/select/textarea标签

label标签通常搭配单选框使用,与单选框对应的文本内容进行绑定

select标签是下拉菜单框

textarea标签是可变化的文本框,超出默认行数就会出现滚动条

html 复制代码
<form action = "https://www.baidu.com/">
        姓名<input type = "text">
        <br>
        密码<input type = "password">
        <br>
        性别<input type = "radio" name = "gender" id = "male">
        <label for="male">男</label>
        <input type = "radio" name = "gender" id = "female">
        <label for="female">女</label>
        <br>
        出生年份
        <select>
            <option>--请选择出生年份--</option>
            <option>2001</option>
            <option>2002</option>
            <option>2003</option>
            <option>2004</option>
            <option>2005</option>
        </select>
        <br>
        个人经历
        <br>
        <textarea rows="2" cols="30"></textarea>
        <br>
        <input type = "submit">
        <input type = "reset">
    </form>

2.3无语义标签

有两种

div独占一行(可以替代<br>)

span不独占一行

html 复制代码
<body>
    <!-- 这里是注释 -->
    <form action = "https://www.baidu.com/">
        <div>
            姓名<input type = "text">
        </div>
        <div>
            密码<input type = "password">
        </div>
        <div>
            性别<input type = "radio" name = "gender" id = "male">
            <label for="male">男</label>
            <input type = "radio" name = "gender" id = "female">
            <label for="female">女</label>
        </div>
        <div>
            出生年份
            <select>
                <option>--请选择出生年份--</option>
                <option>2001</option>
                <option>2002</option>
                <option>2003</option>
                <option>2004</option>
                <option>2005</option>
            </select>
        </div>
        <div>个人经历</div>
        <div>
            <textarea rows="2" cols="30"></textarea>
        </div>
        <div>
            <input type = "submit">
            <input type = "reset">
        </div>
    </form>
</body>

三.特殊字符

在html中如何表示空格,<>,&呢,肯定不能直接表示,因为html会将多余的空格字符叠加为一个,<>又会和标签符号混淆,那么我们需要用额外的方法来表示

空格&nbsp

<&lt <&gt & &amp

看一下效果

相关推荐
IT_陈寒2 分钟前
React 性能优化:5个实战技巧让首屏加载提升50%,开发者亲测有效!
前端·人工智能·后端
rising start19 分钟前
前端基础一、HTML5
前端·html·html5
Never_Satisfied28 分钟前
在JavaScript / HTML中,div容器在内容过多时不显示超出的部分
开发语言·javascript·html
鬼谷中妖28 分钟前
JavaScript 循环与对象:深入理解 for、for...in、for...of、不可枚举属性与可迭代对象
前端
大厂码农老A33 分钟前
你打的日志,正在拖垮你的系统:从P4小白到P7专家都是怎么打日志的?
java·前端·后端
im_AMBER35 分钟前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父38 分钟前
前端速通—CSS篇
前端·css
pixle042 分钟前
Web大屏适配终极方案:vw/vh + flex + clamp() 完美组合
前端·大屏适配·vw/vh·clamp·终极方案·web大屏
ssf19871 小时前
前后端分离项目前端页面开发远程调试代理解决跨域问题方法
前端
@PHARAOH1 小时前
WHAT - 前端性能指标(加载性能指标)
前端