如何制作可扩展的文本框？

我想制作一本以给定宽度/高度开始的教科书。然后，如果用户输入的内容超过给定的空间量，文本框就会向下扩展。我该怎么做呢？我使用 CSS 吗？ 当用户超过允许的行数时，基本文本框仅显示滚动条。如何使文本框将行数再扩展 5 行？

<form method="post" action="">
<textarea name="comments" cols="50" rows="5"></textarea><br>
<input type="submit" value="Submit" />
</form>

我如何使用罗伯特·哈维提到的例子？我以前从未使用过 JavaScript..

jQuery 自动调整大小插件
http://james.padolsey.com/javascript/jquery-plugin-autoresize/ http://james.padolsey.com/javascript/jquery-plugin-autoresize/

使用步骤：

你需要 jQuery。要将其添加到您的页面：

<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

然后，下载插件并将其放在与网页相同的文件夹中。要引用它，请将其添加到您的网页中：

<script type="text/javascript"
    src="autoresize.jquery.js"></script>

接下来，将文本框添加到您的页面：

<textarea id="comment" style="width: 400px; padding: 10px; height: 50px; 
    display: block; font-family:Sans-serif; font-size:1.2em;">
    Type something in here, when you get close to the end the box will expand!
</textarea>

最后，在脚本块中，添加将插件连接到文本框的代码：

<script type="text/javascript">
    $('textarea#comment').autoResize({
        // On resize:
        onResize : function() {
            $(this).css({opacity:0.8});
        },
        // After resize:
        animateCallback : function() {
            $(this).css({opacity:1});
        },
        // Quite slow animation:
        animateDuration : 300,
        // More extra space:
        extraSpace : 40
    });
</script>