web-dev-qa-db-ja.com

<input>要素内にラベルを作成する方法は？

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

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

最もシンプルで優れたソリューションは何ですか？

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

より良い例は、SO検索ボタンです！これがこのコードの入手元です。ページのソースを表示することは貴重なツールです。

45
Cory Walker

HTML5を使用している場合は、placeholder属性を使用できます。

<input type="text" name="user" placeholder="Username">
118
Rich Bradshaw

私の意見では、最良の解決策には画像も入力のデフォルト値の使用も含まれません。むしろ、David Dorwardのソリューションに似ています。

簡単に実装でき、スクリーンリーダーやjavascriptを使用していないユーザーにとってはうまく機能します。

ここの2つの例を見てください： http://attardi.org/labels/

通常、フォームでは2番目の方法（labels2）を使用します。

37
Tex

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

アクセシビリティとユーザビリティの意味合いがあるため、このアプローチは本当に嫌いです。

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

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

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

次に、入力がフォーカスを失うたびに、入力に値があるかどうかをテストします。存在する場合は、祖先要素にクラス（「hide-label」など）があることを確認し、そうでない場合はそのクラスがないことを確認します。

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

スタイルシートは、セレクターでそのクラス名を使用してラベルを非表示にします（テキストインデントを使用：-9999px;通常）。

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

4
Quentin

@Cory Walkerによって提案されたソリューションと@Rafaelからの拡張機能をまとめました。@ 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

2
Maciek

PlaceHolder.JSを使用してください。すべてのブラウザで動作し、html5に準拠していないブラウザでも非常に簡単です http://jamesallardice.github.io/Placeholders.js/

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

Onblurイベントも追加します。

1
Alex V

HTMLプロパティに関する1つのヒントプレースホルダーおよびタグtextarea、<textarea>と</textarea>の間にスペースがないことを確認してください。 プレースホルダーは機能しません。例：

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

間にスペースがあるため、これは機能しません...

1
cn123h

入力を開始すると消えます。空の場合は再び表示されます。

        <%= f.text_field :user_email,:value=>"",:placeholder => "Eg:[email protected]"%>

最も簡単な方法...

1
Thaha kp

あなたはそのためのJavascriptコードを必要としません...
プレースホルダー属性を意味すると思います。コードは次のとおりです。

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



デフォルトのテキストは灰色がかった色になり、クリックすると消えます！

0
1010

これを使って

スタイル：

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

html：

javascript：

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（）関数を呼び出すことを忘れないでください。

よくできました

0
Davide Consonni

上記のようにラベルを保持し、プレースホルダーを使用しないのは良いことだと思います。ここで説明するように、UXに適しています： https://www.smashingmagazine.com/2018/03/ux-contact-forms-essentials-conversions/

入力フィールド内にラベルを付けた例：codepen.io/jdax/pen/mEBJNa

0
Mohammed