6

画像や JavaScript を使用せずに送信入力のスタイルを設定するのは困難です。

私が知っているように、HTML コードを sumbit 入力値に直接挿入する方法はありません。また、送信入力を div 要素でラップすると (複数の境界線を追加する場合など)、領域全体がクリック可能になるわけではありません。

ラベルをクリックすると、すべてのブラウザでフォームが送信されますか?

<form method="test.rb">
 <input type="text" name="test" id="test" />
 <label for="button">
  <input type="submit" name="button" id="button" value="Send!" />
 </label>
</form>
4

3 に答える 3

9

ラベルの関連付けに関する W3C によると:

これらの要素のラベルは value 属性 (送信およびリセット ボタンの場合)、alt 属性 (画像ボタンの場合)、または要素コンテンツ自体 (ボタン) を介して提供されるため、 label 要素は次の場合には使用されません。

@Jeremiah Isaacsonそれを指摘してくれてありがとう。

古い回答

はい、これでうまくいきます。すべてのブラウザーでの動作を検証することはできませんが、W3C の仕様には次のように記載されています。

ラベルを別のコントロールに暗黙的に関連付けるには、コントロール要素が LABEL 要素のコンテンツ内にある必要があります... LABEL 要素がフォーカスを受け取ると、関連するコントロールにフォーカスを渡します。

したがって、LABELをクリックすることで、本質的に送信入力をクリックしていると思います。

これの実現可能性を指摘してくれた@steveloveに感謝します。

于 2010-11-23T15:24:07.870 に答える
3

問題がボタン内に HTML コードを配置することである場合は、<button>それを可能にする which を使用する必要があります。

<button type="submit" name="button" id="button"><img src="button.png" />Send!</button>

しかし、あなたの質問に答えるには<label>：いいえ、それはうまくいきません。どうやらそれは機能するようで、少し考えてみると、そうすべきではない理由がわかりません。

于 2010-11-23T15:18:09.503 に答える
-1

画像や JavaScript を使用せずに送信入力のスタイルを設定するのは困難です。

JavaScript や画像を使用せずに入力のスタイルを設定するのは非常に簡単です。

css を使用する - すべての送信ボタンのスタイル - または特定の要素に適用されるinput[type=submit]クラスを使用するinput.submit-btn

色、境界線、背景、パディング、位置、フォントの太さ、グラデーション、ドロップ シャドウなどのスタイルを設定できます。CSS を使用してすべての数の効果を設定できます。

出来上がりのセクシーなボタン -

   input[type=submit] {
        padding:4px;
        color: #fff;
        margin-top: 10px;
        background-color: #e96000;
        border: none;
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff6900), to(#e96000));
        background:  -moz-linear-gradient(25% 75% 90deg, #e96000, #ff6900);
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }
于 2010-11-23T15:23:17.813 に答える