Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/ja/docs/Web/HTML/Reference/Elements/input/reset below:

<input type="reset"> - HTML | MDN

Baseline Widely available

<input> 要素の reset 型はボタンとして表示され、既定の click イベントのハンドラーは、フォーム内の入力欄すべてを初期値にリセットします。

<form>
  <div class="controls">
    <label for="id">User ID:</label>
    <input type="text" id="id" name="id" />

    <input type="reset" value="Reset" />
    <input type="submit" value="Submit" />
  </div>
</form>

.controls {
  padding-top: 1rem;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: 1fr 2fr;
  gap: 0.7rem;
}

label {
  font-size: 0.8rem;
  justify-self: end;
}

input[type="reset"],
input[type="submit"] {
  width: 5rem;
  justify-self: end;
}

input[type="reset"] {
  grid-column: 2;
  grid-row: 2;
}

input[type="submit"] {
  grid-column: 2;
  grid-row: 3;
}

メモ: 通常、フォームにリセットボタンを配置するべきではありません。このようなボタンは便利なものではなく、間違ってボタンをクリックしてしまったユーザーをイライラさせる可能性が高くなります（送信ボタンをクリックしようとしているときにクリックしてしまうことが多いです）。

<input type="reset"> 要素の value 属性は、ボタンのラベルとして表示される文字列を示します。 reset などのボタンは他の値を持ちません。 value はボタンのアクセシブル説明を指定します。

<input type="reset" value="フォームをリセット" />

value を指定しなかった場合は、既定のラベルが付いたボタンが表示されます（通常は「リセット」ですが、ユーザーエージェントによって異なります）。

<input type="reset"> ボタンはフォームをリセットするために使用されます。独自のボタンを作成して JavaScript を使用してカスタマイズしたいのであれば、 <input type="button"> またはよりよい <button> 要素を使用してください。

基本的なリセットボタンを作成するところから始めましょう。

<form>
  <div>
    <label for="example">何かテキストの例を入力してください</label>
    <input id="example" type="text" />
  </div>
  <div>
    <input type="reset" value="フォームをリセット" />
  </div>
</form>

次のように表示されます。

テキストフィールドにいくらかテキストを入力してから、リセットボタンを押してみてください。

リセットボタンにショートカットキーを追加するには — あらゆる <input> で通用する方法としてと — グローバル属性の accesskey を使用します。

この例では、 r がアクセスキーとして指定されます (r はブラウザーや OS の組み合わせによる特定の修飾キーを押しながら押す必要があります accesskey に有益なリストがあります)。

<form>
  <div>
    <label for="example">何かテキストの例を入力してください</label>
    <input id="example" type="text" />
  </div>
  <div>
    <input type="reset" value="フォームをリセット" accesskey="r" />
  </div>
</form>

上記の例の問題点は、アクセスキーが何であるかをユーザーが知る方法がないことです。これは特に、一般的には競合を避けるために修飾キーが標準的ではないために特に問題になります。サイトを構築する際には、サイトデザインの邪魔にならないような方法でこの情報を提供するようにしてください（例えば、サイトのアクセスキーについての情報を指す簡単にアクセスできるリンクを提供するなど）。ボタンにツールチップを追加する（title 属性を使う）ことも役立ちますが、アクセシビリティのためには完全な解決策ではありません。

リセットボタンを無効化するには、以下のようにグローバル属性の disabled を指定するだけです。

<input type="reset" value="Disabled" disabled />

実行時に disabled を true または false に設定することで、ボタンを有効化したり無効化したりすることができます。 JavaScript では、これは btn.disabled = true や btn.disabled = false のようになります。

メモ: ボタンの有効化や無効化についてのより詳しい情報は、 <input type="button"> のページを参照してください。

ボタンは制約の検証には関係しません。制約を受ける実際の値を持っていません。

上記に簡単な例を挙げました。リセットボタンについては、これ以上言うことはありません。

• <input> およびそれが実装している HTMLInputElement インターフェイス
• フォームとボタン
• HTML フォーム
• <button> 要素

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4