如何获得多行输入文本?

时间:2018-09-28 20:15:12

标签: html css

我正在尝试制作一个包含10行的输入文本框,但是我做不到,也不知道它会发生什么。
Comment box 输入type =“ text” style =“ width:300px;” class =“ form-control” name =“ commentText” id =“ field_commentText” [(ngModel)] =“ comment.commentText”必需minlength =“ 2” maxlength =“ 65000”

我该如何解决?

 <div class="form-group">
    <label class="form-control-label" jhiTranslate="jhipsterPress08App.comment.commentText" for="field_commentText">Comment Text</label>
        <input type="text" style="width: 300px;" class="form-control" name="commentText" id="field_commentText"
                                            [(ngModel)]="comment.commentText" required minlength="2" maxlength="65000"/>
            <div [hidden]="!(editForm.controls.commentText?.dirty && editForm.controls.commentText?.invalid)">
            <small class="form-text text-danger"
                                            [hidden]="!editForm.controls.commentText?.errors?.required" jhiTranslate="entity.validation.required">
                                            This field is required.
            </small>
            <small class="form-text text-danger"
                                            [hidden]="!editForm.controls.commentText?.errors?.minlength" jhiTranslate="entity.validation.minlength" translateValues="{ min: 2 }">
                                            This field is required to be at least 2 characters.
            </small>
            <small class="form-text text-danger"
                                            [hidden]="!editForm.controls.commentText?.errors?.maxlength" jhiTranslate="entity.validation.maxlength" translateValues="{ max: 65000 }">
                                            This field cannot be longer than 65000 characters.
            </small>
        </div>

谢谢

3 个答案:

答案 0 :(得分:1)

我想您正在寻找文本区域。

<textarea id="comment" cols="40" rows="10"></textarea>

答案 1 :(得分:1)

使用textarea标签创建多行输入字段。

具有10行的文本区域将如下所示:

<textarea rows="10" cols="50">
    A bunch of text goes here.
</textarea>

答案 2 :(得分:1)

通常一个文本区域用于2行或更多行。

<div class="form-group">
    <label class="form-control-label" jhiTranslate="jhipsterPress08App.comment.commentText" for="field_commentText">Comment Text</label>
    <textarea class="form-control" name="commentText" id="field_commentText" rows="10" cols="80"></textarea>
</div>