在textbixes和textareas中显示默认文本的最佳方式是什么？

问题描述

我网站上的一个表格与我联系的一个HTML页面有两个字段

1）subject

2 ）message

第一次加载页面时，我希望这两个框显示在此处输入主题和在这里输入消息。

我发现我们可以通过使用文本框的value属性来完成此操作，这是最佳方式吗？ ？
我有什么替代方案可以达到这个目的？

噢，我真的需要写完我的关于这个问题的文章。以下是未完成版本：

First—描述输入字段内容的消息是不是默认值。默认值是可以提交的东西（例如，基于GeoIP输入的国家或来自客户记录的递送地址）。

第二—使用默认值作为假标签，然后在用户关注它时擦除它（假定您不希望用户必须手动删除该消息）会导致可访问性问题。屏幕阅读器会读出所关注的内容，如果您在关注内容时将其删除，则无法获取相关信息。

最好选项，在我看来，是在控件旁边放置一个< label> 。网页通常不会在空间上缩短 - —滚动条不是邪恶的。

如果你真的希望它看起来像它在控制中那么：

1. 将< label> 和< input> 放入< div>


2. 使用JavaScript（so你没有垃圾体验，JS没有）


3. 应用CSS将< div> 设置为 position：relative 并给它一个大小。


4. 制作<输入> <$ c $的背景 c>透明并设计它以填充div


5. 位置 < ;在< input>


6. 下标签> 编写一个函数，的输入是否为空字符串。根据答案，在div上打开一个类。


7. 在div上设置该类时，设置 text-indent -999em ），以便文本隐藏在屏幕外（但仍可供屏幕阅读器使用）

A form on my website's contact -us HTML page has two fields

1) subject

2) message

When the page loads for the first time I want these two boxes to display messages like "Enter subject here" and "Enter Message here".

I found that we can do this by using the "value" attribute of the text box, is this the best way ??..What alternatives do I have to achieve this ?

解决方案

Oh, I really need to finish writing my article on this subject. Here's the unpolished version:

First — a message describing what to enter into a field is not a default value. Default values are things which could be conceivably submitted (such as a country being entered based on GeoIP, or a delivery address from customer records).

Second — using the default value as a fake label and then wiping it when the user focuses it (presumably you don't want the user to have to manually delete the message) causes accessibility problems. Screen readers read out the content that is focused, if you delete it when it becomes focused, they can't get the information.

The best option, in my opinion, is to place a <label> next to the control. Webpages aren't typically short on space — scrollbars are not evil.

If you really want it to look like it is in the control then:

1. Put the <label> and <input> in a <div>
2. Set a class on that <div> using JavaScript (so you don't have a crap experience is JS isn't available)
3. Apply CSS to set the <div> to position: relative and give it a size.
4. Make the background of the <input> transparent and style it to fill the div
5. Position the <label> under the <input>
6. Write a function that checks to see if the value of the input is an empty string or not. Toggle a class on the div on and off depending on the answer.
7. When that class is set on the div, set text-indent to a high negative length (such as -999em) so that the text is hidden off screen (but still available to screen readers)

这篇关于在textbixes和textareas中显示默认文本的最佳方式是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！