时间戳

首页 > 解决方案 > 如何使 HTML 中的表单输入框变大（连同文本）？

html - 如何使 HTML 中的表单输入框变大（连同文本）？

问题描述

我想让我的网页上的表格在我的屏幕上更大。我已经搜索了执行此操作的方法，但我设置的属性都不起作用。HTML：

{% block body %}
    <div id='title'>
        <h1>
            VISUALIZER2D
        </h1>
    </div>
    <div id='subheading'>
        <h2>
            Enter a YouTube URL below to start!
        </h2>
    </div>
    <form action='/' method='post'>
        <div id='input'>
            <input name='link' placeholder='Enter YouTube URL' type ='text'>
        </div>
        <div>
            <button type='submit'>Next</button>
        </div>
    </form>
{% endblock %}

CSS：

{% block style %}
    body
    {
        background-color: #252C3E;
        text-align: center;
        font-family: 'Courier';
    }
    #input
    {
        font-size: 20px;
    }
    #title
    {
        color: white;
        font-size: 40px;
    }
    #subheading
    {
        color: white;
    }
{% endblock %}

我错过了什么？如果我为我设置一个高度 #input 标签，表单周围的不可见框会变大，但表单本身不会变大。

标签： htmlcss

解决方案

您可以简单地使用textarea而不是输入字段。它的工作方式与输入工作方式相同

此外，您可以根据需要增加数量rows并col增加其大小。

运行下面的片段

body {
  background-color: #252C3E;
  text-align: center;
  font-family: 'Courier';
}

#title {
  color: white;
  font-size: 40px;
}

#subheading {
  color: white;
}
<div id='title'>
  <h1>
    VISUALIZER2D
  </h1>
</div>
<div id='subheading'>
  <h2>
    Enter a YouTube URL below to start!
  </h2>
</div>
<form action='/' method='post'>
  <div id='input'>
    <textarea placeholder='Enter YouTube URL' id="link" rows="4" cols="50">
   
   </textarea>
  </div>
  <div>
    <button type='submit'>Next</button>
  </div>
</form>

推荐阅读