Form TextArea Appears the Same on All Browsers

Competetive Marketing

Form TextArea Appears the Same on All Browsers

[Category: HTML/CSS]
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 [Comment] Note: Pages are moderated.

4-Star Rating

The width and height are what make the textarea 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 my website and learn more about Best Deals on Leases

Newest Articles...
Inappropriate Photos
Kids Are Putting You, Themselves, and Their Future at Risk.
[Security] Sep-17-2019: Kids are prone to sharing photos, problem is some may be breaking the law, and you may be held liable.
Angry customer
Train Your Employees on How to Talk to Customers
[Business] Sep-16-2019: If you don't take care to train employees on how to treat customers with respect you are losing business and your reputation suffers.
Don't Play Doctor Online
Do Not Play Doctor Online You May Get More Than You Bargained For
[Online Shopping] Sep-10-2019: Be careful when purchasing medical or dental supplies online. Some products are not meant for consumers.
Business Cards
The Real Cost of Buying Business Cards Online
[Online Shopping] Sep-06-2019: The prices sound too good to be true, if you're willing to wait 2-3 weeks and avoid any additional charges you can save.
No Phishing No Spam
Email is Your Greatest Risk and You Cannot Live Without It
[Security] Sep-05-2019: Email is the weakest point in your enterprise or home environment and accounts for most malware.
Additional Articles Continued...
Robert Furst Competitive Marketing • 22052 Las Brisas Circle • Boca Raton • Florida • 33433 (754) 307-4954
LinkedIn    Twitter    Messenger    Facebook    Pintrest    Alexa
©2019 -RF-. All rights reserved.   Privacy & Usage