零基础学习HTML(22)——output标签、textarea标签

最新推荐文章于 2024-07-17 22:31:47 发布

Dragon水魅

最新推荐文章于 2024-07-17 22:31:47 发布

阅读量467

点赞数

分类专栏：零基础学习Web开发文章标签： html

本文链接：https://blog.csdn.net/qq_43650934/article/details/108933956

版权

零基础学习Web开发专栏收录该内容

45 篇文章 2 订阅

订阅专栏

本文介绍了如何使用HTML5的output标签动态显示输入数值，并通过textarea实现多行文本输入，还展示了如何设置textarea的宽度和高度，以及wrap属性的用法。适合前端开发者学习基本的表单交互设计。

摘要由CSDN通过智能技术生成

注：学习笔记基于小甲鱼学习视频，官方论坛：https://fishc.com.cn/forum.php

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/
html5速查手册：https://man.ilovefishc.com/html5/
css速查手册：https://man.ilovefishc.com/css3/

学习正文

output 标签：https://man.ilovefishc.com/pageHTML5/output.html
textarea 标签：https://man.ilovefishc.com/pageHTML5/textarea.html

可以通过 output 标签显示结果：

<!DOCTYPE html>
<html>
<head>
    <title>第二十二节课</title>
    <meta charset="utf-8">
</head>
<body>
    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)" action="welcome.php" method="GET">
        <!-- 使用 output 显示结果 -->
        0<input type="range" id="a" value="50" min="0" max="100">100 + <input type="number" id="b" value="50"> = <output name="x" for="a b">100</output>
    </form>
</body>
</html>

在这里插入图片描述

可以使用 textarea 标签接收多行输入：

<!DOCTYPE html>
<html>
<head>
    <title>第二十二节课</title>
    <meta charset="utf-8">
</head>
<body>
    <form action="welcome.php" method="GET">
        <!-- 接收多行文本输入 -->
        <textarea name="saysth">
        “妈，三年之期到了，这三年里，我都按照您的遗言去做了，现在整个苏家乃至半个江城，没有谁不知道那从林家入赘过来的弃少就是个废物！”

        “妈，我知道，你之所以要我隐忍三年，是担心我会遭受家族人的迫害，你说过，我天赋异禀，将来必是人中龙凤，但出身不好，无权无势，争不过那些人，一旦展露出一些天赋，必会招来杀身之祸，所以你逼我装成一个废物。”
                
        “可是…妈，您并不知道，您错了，大错特错，林家在我林阳的眼里，只是一群土鸡瓦狗！我林阳何惧一群土鸡瓦狗？”
                
        “林家抛弃了我，您也不希望我再回林家，我跟林家已经没有关系。今天来看您，是想告诉您，三年之期结束，我…林阳！不想再当废物了！”</textarea>
        <br>
        <button>提交</button>
    </form>
</body>
</html>

在这里插入图片描述

可以通过 textarea 的 rows 和 cols 属性指定文本的宽度和高度：
注：一个中文字符默认为两个英文字符

<!DOCTYPE html>
<html>
<head>
    <title>第二十二节课</title>
    <meta charset="utf-8">
</head>
<body>
    <form action="welcome.php" method="GET">
        <!-- 指定文本的宽度和高度 -->
        <textarea name="saysth" rows="5" cols="30">
        “妈，三年之期到了，这三年里，我都按照您的遗言去做了，现在整个苏家乃至半个江城，没有谁不知道那从林家入赘过来的弃少就是个废物！”

        “妈，我知道，你之所以要我隐忍三年，是担心我会遭受家族人的迫害，你说过，我天赋异禀，将来必是人中龙凤，但出身不好，无权无势，争不过那些人，一旦展露出一些天赋，必会招来杀身之祸，所以你逼我装成一个废物。”
                
        “可是…妈，您并不知道，您错了，大错特错，林家在我林阳的眼里，只是一群土鸡瓦狗！我林阳何惧一群土鸡瓦狗？”
                
        “林家抛弃了我，您也不希望我再回林家，我跟林家已经没有关系。今天来看您，是想告诉您，三年之期结束，我…林阳！不想再当废物了！”</textarea>
        <br>
        <button>提交</button>
    </form>
</body>
</html>