在 HTML 中调整输入框的文本区域

Question

我是 HTML 的新手，我正在尝试调整输入框的大小。这是我的代码

<!DOCTYPE html>
<html>
<body>

<h1> Text Summarizer </h1>
<div class="login">
<h1>Insert the text that you want to summarize in the box below</h1>

  <form action="{{url_for('summary')}}"method="post">
    <input type="text" name="input" placeholder="type here" required="required"> 
    <br><br>
    <input type="submit",value="summary">
  </form> 
  <br>
  <br>
  {{data}}
  </div>

这是我试过的。

<!DOCTYPE html>
<html>
<body>

<h1> Text Summarizer </h1>
<div class="login">
<h1>Insert the text that you want to summarize in the box below</h1>

  <form action="{{url_for('summary')}}"method="post">
    <input type="text" name="input" placeholder="type here" required="required"> 
    <br><br>
   <textarea rows= "4" cols="50">
   </textarea>
   <br><br>
    <input type="submit",value="summary">
  </form> 
  <br>
  <br>
  {{data}}
  </div>

我现在在原始文本框旁边得到了第二个框。任何帮助将不胜感激。

Answer 1

如果您希望它成为带有“在此处输入”占位符的大文本字段，请执行以下操作：

<!DOCTYPE html>
<html>
<body>

<h1> Text Summarizer </h1>
<div class="login">
<h1>Insert the text that you want to summarize in the box below</h1>

  <form action="{{url_for('summary')}}"method="post">
   <textarea rows= "4" cols="50" type="text" name="input" placeholder="type here" required="required">
   </textarea>
   <br><br>
    <input type="submit" value="summary">
  </form> 
  <br>
  <br>
  {{data}}
  </div>

Answer 2

或者如果您想要增加输入标签，试试这个：

<!DOCTYPE html>
<html>
<body>

<h1> Text Summarizer </h1>
<div class="login">
<h1>Insert the text that you want to summarize in the box below</h1>

  <form action="{{url_for('summary')}}"method="post">
    <input type="text" name="input" placeholder="type here" required="required" style="width:35%; height:100px;"> 
    <br><br>
    <input type="submit" value="summary">
  </form> 
  <br>
  <br>
  {{data}}
  </div>

在 HTML 中调整输入框的文本区域

Resize text area of input box in HTML

html

textbox

resize