如何使HTML中的表单输入框（以及文本）变大？

debugcn 发表于 Dev

joemama12345

我想在屏幕上放大网页上的表单。我已经搜索了执行此操作的方法，但没有设置任何属性。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标签设置了高度，则窗体周围的不可见框会变大，但窗体本身不会变大。

一直在帮助

您可以简单地使用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>