Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Community Proposals
Community Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Q&A

Welcome to Software Development on Codidact!

Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.

Accessibility standard/s for multilined <input type="text"> fields

+2
−2

I have a simple HTML contact form and I wish to create a text area in it with <input type="text"> but without a <textarea> tag.

The end product should be an <input type="text"> field which by the help of CSS, be styled pretty much with the same default style of a <textarea> element.

Are there any accessibility standards (such as minimum height or minimal character allowance, etc.) for such a field?

History
Why does this post require moderator attention?
You might want to add some details to your flag.
Why should this post be closed?

1 comment thread

I don't really understand your question. What is "_minimum_ character allowance_"? Is that the requir... (3 comments)

1 answer

+7
−0

The standard for multi-line text input is to use a textarea. Don't use input type="text", it won't work. I'm not sure why you don't want to use a textarea, but after reading this answer, I hope you'll understand why an input is not the correct solution.


Definitions

MDN defines input text as:

<input> elements of type text create basic single-line text fields.

And WHATWG defines it as:

The input element represents a one line plain text edit control for the element's value.

In the same link, we can also find this:

User agents must not allow users to insert U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the element's value.

Which means that you can't type newlines (aka ENTER to create a new line). We'll see more about that in the tests below, but anyway, this means that an input type="text" field can't have more than one line of text.


A textarea, on the other hand, is defined by MDN as:

The <textarea> HTML element represents a multi-line plain-text editing control

And WHATWG defines it as:

The textarea element represents a multiline plain text

So, if you need multiline inputs, use a textarea.


Workarounds (spoiler: they don't work)

You can try as much as you can, but I'm afraid you won't be able to make input type="text" behave exactly like a textarea.

If you search on the web, you'll find some "solutions" like the CSS below, which sets the input dimensions (so it looks like a textarea) and the word-break property to make the words, well, break just like they would in a textarea:

input {
  height: 50px;
  width: 200px;
  word-break: break-word;
}

This used to work in the past, but it seems that it doesn't anymore. I've tested in Chrome 91 and Firefox 89, and it's displayed as this:

text centered, no newlines

Note that the text is vertically centered. Maybe we could "fix" it by making some "smart" CSS hack, such as:

input {
  height: 30px;
  width: 200px;
  word-break: break-word;
  padding-bottom: 80px;
}

Which results in this:

text top-aligned

But still, the words don't wrap if I type a line longer than the width.

And the more important detail: I can't type newlines (pressing ENTER does nothing, it's ignored by the browser). I also tried to copy and paste a multiline text, but after pasting, the newlines were replaced by spaces.


Conclusion

Although you can adjust the CSS, so the input text looks like a textarea, you can't make the input accept multiline text.

Maybe there might be some hacky/tricky way to do it with some (or tons of) JavaScript, but I guess this would deviate too much from any accessibility standard. Actually, using any HTML element for something it's not intended to is a bad thing (in a more general way, using a tool to solve a task it wasn't designed to is usually a bad idea, specially when there's another tool that does the job).

Therefore, unless you have a very good reason (and I honestly can't see nor imagine one) to not use a textarea, you should definitely go with it. Don't complicate what can be kept simple.


Minimal Character Allowance

Regarding "minimal character allowance", both input and textarea have a minlength attribute, so you can define the minimum number of characters that must be entered.

Just reminding that MDN says:

The minimum number of characters (as UTF-16 code units) the user can enter into the text input.

To not deviate too much from the question, a tl;dr explanation: some characters (such as emojis, which are very common nowadays) are represented as two UTF-16 code units.

So, an input like this:

<input type="text" minlength="4" required>

It will require 4 characters (such as "abcd") to be submited, but if you type 💩💩 it'll also be valid as well, because each 💩 requires two UTF-16 code units, hence 💩💩 has the minimum length required.


Are there any accessibility standards (such as minimum height or minimal character allowance, etc.) for such a field?

The exact values depends on what you need, there's no such thing as "Standard ISO-whatever says that you should accept at least N characters" (at least I've never seen anything like that). Different systems will have different requirements regarding minimum/maximum size for input fields. YMMV.

History
Why does this post require moderator attention?
You might want to add some details to your flag.

0 comment threads

Sign up to answer this question »