<input> 要素内にラベルを作成するにはどうすればよいですか?

StackOverflow https://stackoverflow.com/questions/781473

  •  13-09-2019
  •  | 
  •  

質問

ユーザーがクリックすると消える入力要素内に説明テキストを挿入したいと考えています。

非常に一般的なトリックであることは知っていますが、その方法がわかりません。

最も簡単/より良い解決策は何ですか?

役に立ちましたか？

解決 

<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" type="text" value="search">

より良い例は、SOの検索ボタンになります！私がこのコードを得たところです。ページのソースを表示すると、貴重なツールです。

他のヒント

あなたはHTML5を使用している場合は、

、あなたはplaceholder属性を使用することができます。

<input type="text" name="user" placeholder="Username">

私の意見では、最善の解決策は、どちらの画像が含まれず、入力のデフォルト値を使用して。むしろ、それはデイビット・ドーウォードのソリューションのようになります。

これは、実装が簡単で、無JavaScriptを使用して、スクリーンリーダーとユーザーのためにきれいに低下します。

ここでは二つの例を見てみましょう： http://attardi.org/labels/する

私は通常私のフォーム上の第二の方法（labels2）を使用します。

一般的なアプローチは、デフォルト値をラベルとして使用し、フィールドがフォーカスを取得したときにそれを削除することです。

アクセシビリティとユーザビリティに影響を与えるため、私はこのアプローチが本当に嫌いです。

代わりに、フィールドの隣に標準要素を使用することから始めます。

次に、JavaScript がアクティブな場合は、祖先要素にクラスを設定すると、いくつかの新しいスタイルが適用されます。

  • 入力とラベルを含む div を相対的に配置します。
  • ラベルを絶対位置に配置する
  • 入力をラベルの上に絶対に配置します
  • 入力の境界線を削除し、背景色を透明に設定します。

次に、入力がフォーカスを失うたびに、入力に値があるかどうかをテストします。存在する場合は、祖先要素にクラスがあることを確認してください (例:"hide-label")、そうでない場合は、そのクラスがないことを確認してください。

入力がフォーカスを取得するたびに、そのクラスを設定します。

スタイルシートは、セレクターでそのクラス名を使用してラベルを非表示にします (text-indent を使用します:)-9999ピクセル;いつもの）。

このアプローチは、JS が無効になっているユーザーやスクリーン リーダーを使用しているユーザーを含む、すべてのユーザーに適切なエクスペリエンスを提供します。

によって提案された

私は一緒に入れているソリューション @Rafaelからの拡張子を持つ@Coryウォーカー 一つのフォーム@texの魔女は私のために少し複雑でした うまくいけば、ある解決策を考え出した。

エラー防止JavaScriptとCSSを無効にします。

これは、ラベルを表示/非表示するために、フォームフィールドの背景色を操作します。

<head>

<style type="text/css">
<!--
    input {position:relative;background:transparent;} 
-->
</style>

<script>
    function labelPosition() {
        document.getElementById("name").style.position="absolute"; 
            // label is moved behind the textfield using the script, 
            // so it doesnt apply when javascript disabled
    }
</script>

</head>
<body onload="labelPosition()">

<form>
        <label id="name">Your name</label>
        <input type="text" onblur="if(this.value==''){this.style.background='transparent';}" onfocus="this.style.background='white'">
</form>

</body>
http://mattr.co.uk/work/form_label：

アクションでスクリプトを表示します。 HTML の

<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" onblur="if (this.value=='') this.value = 'search'" type="text" value="search">

すぎのonblurイベントを追加します。

あなたはそれが空disappear.Ifます入力を開始すると

それが再び表示されます。

        <%= f.text_field :user_email,:value=>"",:placeholder => "Eg:abc@gmail.com"%>

最も簡単な方法...

すべてのブラウザでその作品をPlaceHolder.JS使用し、非HTML5対応のブラウザのための非常に簡単にしてください   http://jamesallardice.github.io/Placeholders.js/する

HTMLプロパティの1つのヒントのプレースホルダーのタグは、のテキストエリア、<それ以外の場合は、のプレースホルダー、<textarea>と</textarea>の間に空白がないことを確認してください/全角を>例えば、動作しません。

<textarea id="inputJSON" spellcheck="false" placeholder="JSON response string" style="flex: 1;"> </textarea>

...の間にスペースがあるので、

これは、動作しません

この

を使用します

スタイル：

<style type="text/css">
    .defaultLabel_on { color:#0F0; }
    .defaultLabel_off { color:#CCC; }
</style>

HTMLます：

ジャバスクリプトます：

function defaultLabelClean() {
    inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++)  {
        if (inputs[i].value == inputs[i].getAttribute("innerLabel")) {
            inputs[i].value = '';
        }
    }
}

function defaultLabelAttachEvents(element, label) {
    element.setAttribute("innerLabel", label);
    element.onfocus = function(e) {
        if (this.value==label) {
            this.className = 'defaultLabel_on';
            this.value = '';
        }
    }
    element.onblur = function(e) {
        if (this.value=='') {
            this.className = 'defaultLabel_off';
            this.value = element.getAttribute("innerLabel");
        }
    }

    if (element.value=='') {
        element.className = 'defaultLabel_off';
        element.value = element.getAttribute("innerLabel");
    }
}


defaultLabelAttachEvents(document.getElementById('MYID'), "MYLABEL");

直前にフォームを送信defaultLabelClean（）関数を呼び出すことを覚えています。

良い仕事

あなたはそのためのJavaScriptコードを必要としません...
私はあなたのplaceholder属性を意味すると思います。ここでは、コードは次のとおりです。

<input type="text" placeholder="Your descriptive text goes here...">



デフォルトのテキストはグレーっぽいとなり、クリックされたとき、それは消えるでしょう！

私はその良い前述したように、プレースホルダを使用するためにラベルを維持していないと思います。ここでの説明としてUXのためのその良いです： https://www.smashingmagazine.com/2018/03 / UX-コンタクトフォーム必需-変換/ の

ここで入力フィールド内のラベル付き例：  codepen.io/jdax/pen/mEBJNa

ここではそれがないすべては（あなたが好きな言葉遣いで）画像をオーバーレイで、簡単な例です。私はどこかにこのテクニックを見ました。あなたが何か他のものを使用した場合は修正する必要がありますので、私は、プロトタイプ・ライブラリを使用しています。 window.load後の画像の読み込みで、それにはJavaScriptが無効になっている場合は優雅に失敗します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1;" />
    <meta http-equiv="Expires" content="Fri, Jan 1 1981 08:00:00 GMT" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <style type="text/css" >

        input.searcher
        {
            background-image: url(/images/search_back.png);
            background-repeat: no-repeat;
            background-attachment: scroll;
            background-x-position: left;
            background-y-position: center;
        }

    </style>

    <script type="text/javascript" src="/logist/include/scripts/js/prototype.js" ></script>
</head>
<body>
    <input type="text" id="q" name="q" value="" />

    <script type="text/javascript" language="JavaScript" >
    //  <![CDATA[
        function f(e){
            $('q').removeClassName('searcher');
        }

        function b(e){
            if ( $F('q') == '' )
            {
                $('q').addClassName('searcher');
            }
        }

        Event.observe( 'q', 'focus', f);
        Event.observe( 'q', 'blur', b);
        Event.observe( window, 'load', b);

    //  ]]>
    </script>
</body>
</html>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top