Freeform text form input box

Question

I have set up an input form like this:

<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>

The final input box is for freeform text comments, but it behaves like an email input box where the cursor is positioned in the center by default and the text doesn't wrap. I need a box that has the same size and rounded edges as the other three inputs, but the text wraps like a normal input box. In other words, I'm looking for a simple freeform text box as a form input box.

This is the css code for the four classes:

.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;
}

I'm using all the same classes in the freeform text box. I have tried new classes for the freeform text box, but still no success. The simple question is how can I do a freeform text input box based on the form code above?

Thanks for any ideas.

What is this input type="comments"? Do you just want a textarea? — takendarkk
– takendarkk, Commented May 23, 2019 at 20:33

Diodeus - James MacFarlane · Accepted Answer · 2019-05-23 20:32:58Z

5

<input type="comments" /> comments isn't a valid input type. Use <textarea>.

answered May 23, 2019 at 20:32

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RTC222 Over a year ago

That looks like it. I'll choose your answer as best in 10 minutes (SO makes me wait).

RTC222 Over a year ago

Followup question. The text still starts in the center, not flush left, and the text does not show up by default, although it will show up when the field gets focus by tabbing from the field above. I removed all of the classes and substituted a class with font size and color, but text still is still invisible when typing it.

Collectives™ on Stack Overflow

Freeform text form input box

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related