时间戳

首页 > 解决方案 > 自由格式文本表单输入框

html - 自由格式文本表单输入框

问题描述

我已经设置了这样的输入表单： 

<form name='inputform' id='inputform'>

    <div class="center_text_grid flex-item mktg_text EMail_Pwd">

    <input type="text" class="signup_join" autofocus placeholder="Your email address" id="email_field" name="email_field" style="width:75%;" required></div>

    <div class="center_text_grid flex-item mktg_text EMail_Pwd">

    <input type="text" class="signup_join" autofocus placeholder="First Name (optional)" id="name_field" name="name1_field" style="width:75%;"></div>

    <div class="center_text_grid flex-item mktg_text EMail_Pwd">
    <input type="text" class="signup_join" autofocus placeholder="Last Name (optional)" id="name_field" name="name2_field" style="width:75%;"></div>

    <div class="center_text_grid flex-item mktg_text EMail_Pwd">
    <input type="comments" class="signup_join" autofocus placeholder="Comments (optional)" name="comments" style="width:75%;"></div>

</form>

最后一个输入框用于自由格式的文本评论，但它的行为类似于电子邮件输入框，默认情况下光标位于中心并且文本不换行。我需要一个与其他三个输入具有相同大小和圆角边缘的框，但文本像普通输入框一样换行。换句话说，我正在寻找一个简单的自由格式文本框作为表单输入框。

这是四个类的css代码：

.center_text_grid {
    display: grid;
    grid-column: 5 / 12;
    grid-row: 20 / 20;
    display: block;
    overflow: auto;
    align-items: center;
    justify-items: center;
}

.flex-item {
  display: flex;
  width: 70%;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.mktg_text{
    font-family: CamphorW01-Thin, sans-serif;
    font-size: 13pt;
    color: rgb(175,222,162);
    line-height: 1.5;
}

.EMail_Pwd{
    grid-column: 8 / 14;
    font-family: CamphorW01-Thin, sans-serif;
    font-size: 14pt;
}

我在自由格式文本框中使用所有相同的类。我已经为自由格式文本框尝试了新类，但仍然没有成功。简单的问题是如何根据上面的表单代码做一个自由格式的文本输入框？

感谢您的任何想法。

标签： htmlcss

解决方案

<input type="comments" /> 评论不是有效的输入类型。使用<textarea>.

推荐阅读