Form Text Area Appears the Same on All Browsers

Competetive Marketing

Form Text Area Appears the Same on All Browsers

[Category: Programming]
Aug. 27, 2019

Textarea Box

Designing a "Form" using HTML and CSS, so it looks the same on Google Chrome, Microsoft Edge, and Mozilla Firefox, sounds easy? HTML5 was supposed to make all basic HTML look the same. Most of the time that is true from one platform to another, one exception is the "textarea" field.

A "Form" on a website allows visitors to contact the site and allows for defining what information will be necessary. For instance, the Form can require that a person enter their name, phone, and email address; conversely, it may not require any specific fields. A Form can contain text boxes, text fields (which can include columns and lines of text), check-boxes, and even allow for uploading of a file or image.

The "textarea" field allows you to display a box in a form that allows for multiple lines of text. In the most basic of HTML code <textarea rows="6" cols="50"> where a box is drawn by the browser that allows for 50 characters across on six lines. The problem is not all of the popular browsers display the width the same way. If you would like to learn more about all the options available to the "textarea" I suggest you visit W3schools.

When creating a Form, you need to give the Form a name, the format for the server to process the data by, and finally where to send that data (the filename), so the Form can be processed. For example:

<form id="form1" name="MyForm" method="post" action="filename.cfm">
and at the end of the form you close the form with:

What you put inside the Form, are the fields that you are looking to get the user to submit. In this case we are asking for one item, the person's name.
<p>Enter Your name:<br/>
<input type="text" name="name"></p>
<p><input type="submit" value="Submit">‹/p›

The completed code would look like this:
<form id="form1" name="MyForm" method="post" action="filename.cfm">
<p>Enter Your name:<br/>
<input type="text" name="fieldname"></p>
<p><input type="submit" value="Submit">‹/p›

Which would display "Enter Your Name" a box for the user to enter their name, followed by the Submit button for them to send the reply.

Forms are rarely this simple and in order for the form to be easier to read, use, and perform as expected we can add instructions to the code. In the following case we are going to change up the name field.
<input name="fieldname" type="text" placeholder="Enter Your Name" id="textfield" maxlength="15" autocomplete="on" REQUIRED="Yes">
Name of the Field = fieldname
Type of Field = text this could be date, phone, etc.
Placeholder = Enter your name, text that appears inside the box instead of on top
ID = textfield CSS will define how this box displays
MaxLength = 15, limits the entry to 15 characters
AutoComplete = Yes, if the user has entered a similar field browser will autofill
Required = Yes, the field must be completed before submitting or a message will pop up

Lets add some customization to the submit button as well
<p><input type="submit" value="Click Here to Submit"></p>
Input Type = Submit can also be "reset" which resets the form to its original state
Value = Click Here to Submit, instead of the common "Submit"

Next we are going to edit the "textarea" code we discussed in the beginning, the one field that needs CSS in order to look the same on all the current browsers. As a reminder here it is again.
<textarea rows="6" cols="50">
We'll add
Class = terea-field which is defined in the CSS
Maxlength = 300 which limits the response to 300 characters
Placeholder = Comments or Requests default text that appears in the "textarea" box
<textarea class="terea-field" maxlength = "300" placeholder="Comments or Requests" name="form_comments"></textarea></p>

As you can see we can define how fields are handled, what they allow or disallow, the only thing we're missing in how to make them look good.

The following is CSS code that instructs each of the fields, the text box, the text area (NEW) and the submit button.

input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 4px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;

.terea-field { can be called by another name
width: 100%;
height: 100px;
background-color: #ffffff;
color: #194f90;
padding: 12px 20px;
margin: 4px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;

input[type=submit] {
width: auto;
background-color: #194f90;
color: white;
padding: 10px 25px;
margin: 4px 0;
border: none;
border-radius: 4px;
cursor: pointer;

And the revised form itself...

<form id="form1" name="MyForm" method="post" action="filename.cfm">
<p><input name="fieldname" type="text" placeholder="Enter Your Name" id="textfield" maxlength="15" autocomplete="on" REQUIRED="Yes"></p>
<p><textarea class="terea-field" maxlength = "300" placeholder="Comments or Requests" name="form_comments"></textarea></p>
<p><input type="submit" value="Click Here to Submit">

Share this page now!

Visitor Comments: Average Rating - 4 Stars [COMMENTS CLOSED] Note: Pages are moderated.

4-Star Rating

The width and height are what make the text area appear the same on different browsers and both can be set as a percentage which is what you are showing. This is the first time I've seen someone take the time to show the code and CSS.

Roofman [Aug. 28, 2019]
Visit and learn more about Best Deals on Leases

Newest Articles...
Digital Signs - Yard Sign
Wide Format Printing for Everyday Use
[Advertising] Mar-17-2020: "flags" with poles, mounted canvas, table covers, car magnets, car wraps, aluminum signs, yard signs, "A-frame" sidewalk signs, and acrylic signs.
Signs, They are Everywhere
[Advertising] Feb-11-2020: Signs are on walls, doors, windows, floors, lawns, they're everywhere...
Miami Streets flooded
Is Miami Beach Becoming Too Expensive to Insure
[Business] Jan-28-2020: Can insurance companies continue to insure what is an increasingly expensive risky venture, real estate in Miami Beach.
Fake Ads
Are Ads No Longer Reasonable for the Sane Person
[Shopping] Dec-27-2019: Today's ads are so out there it's getting really difficult to believe anything.
Focus on sales not solutions
Amazon is Too Busy Pushing Sponsors to Give Good Results
[Shopping] Dec-09-2019: Instead of focusing on better search results there is a focus on pushing Sponsored vendors.
Additional Articles Continued...
Robert Furst Competitive Marketing • 22052 Las Brisas Circle • Boca Raton • Florida • 33433 (754) 307-4954
LinkedIn    Twitter    Messenger    Facebook    Pintrest
©2020 -
RF-. All rights reserved.   Privacy & Usage