HTML Academy · レッスン

button要素：submit、reset、button

Q: 「button要素：submit、reset、button」で何を学びますか？

ボタンでフォームの送信、リセット、カスタムアクションを実行します。 ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

ボタンでフォームの送信、リセット、カスタムアクションを実行します。

「button要素：submit、reset、button」はCoddyKit上の無料HTML Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

button要素

<button>要素は、クリック可能なコントロールを作成する基本的な方法です。

<button type="submit">Submit</button>
<button type="reset">Clear Form</button>
<button type="button">Do Something</button>

<!-- Three types, each with a different default behavior -->
<!-- Always specify type — the default is submit inside forms -->

type=submit

type="submit"は、クリック時にフォームを送信します。

<form action="/register" method="post">
  <input type="email" name="email">
  <button type="submit">Create Account</button>
</form>
<!-- Triggers form validation, then sends the form data -->
<!-- Also triggered by pressing Enter in most text inputs -->

type=reset

type="reset"は、すべてのフォームフィールドをデフォルト値に戻します。

<form>
  <input type="text" name="name" value="">  <!-- empty default -->
  <input type="number" name="qty" value="1">  <!-- default: 1 -->
  <button type="reset">Clear</button>
</form>
<!-- Clicking reset restores qty to 1 and clears name -->
<!-- Use sparingly — users often accidentally reset forms -->

type=button

type="button"はデフォルトでは何も実行しません。JavaScriptを紐付けて使用します。

<button type="button" id="toggle-theme">Toggle Dark Mode</button>

<script>
document.getElementById('toggle-theme').addEventListener('click', () => {
  document.body.classList.toggle('dark');
});
</script>
<!-- type="button" prevents accidental form submission
     Always use this for non-submit buttons -->

button と input[type=submit] の比較

<input type="submit">よりも<button>を使用することが推奨されます。

<!-- Old way (limited): -->
<input type="submit" value="Submit">

<!-- Modern way (flexible — can contain HTML): -->
<button type="submit">
  <svg><!-- icon --></svg>
  Submit Form
</button>
<!-- button can contain icons, emphasis, and any inline HTML
     input type=submit can only have plain text via the value attribute -->

ボタンの無効化

disabled属性を使用してボタンを無効にします。

<button type="submit" disabled>Submit</button>
<!-- Disabled buttons:
  - Cannot be clicked
  - Not in tab order
  - NOT submitted with the form
  - Browser renders them grayed out -->

<!-- Enable/disable with JavaScript: -->
btn.disabled = true;
btn.disabled = false;

ローディング状態のパターン

フォームの送信中はローディング状態を表示します。

<button type="submit" id="submit-btn">
  <span id="btn-text">Submit</span>
  <span id="btn-spinner" hidden aria-hidden="true">⏳</span>
</button>

<script>
form.addEventListener('submit', () => {
  document.getElementById('submit-btn').disabled = true;
  document.getElementById('btn-text').textContent = 'Submitting...';
  document.getElementById('btn-spinner').hidden = false;
  document.getElementById('btn-spinner').removeAttribute('aria-hidden');
});
</script>

formactionとformmethodによる上書き

特定のボタンでフォームのactionやmethodを上書きします。

<form action="/save" method="post">
  <input type="text" name="title">

  <!-- Save: uses form defaults -->
  <button type="submit">Save Draft</button>

  <!-- Publish: overrides action and method -->
  <button type="submit" formaction="/publish" formmethod="post">
    Publish Now
  </button>
</form>

ARIAを使用したボタン

ネイティブのボタンと見た目が異なるカスタムボタンには、ARIAが必要です。

<!-- Icon-only button -->
<button type="button" aria-label="Close dialog">
  <svg aria-hidden="true"><!-- X icon --></svg>
</button>

<!-- Toggle button -->
<button type="button" aria-pressed="false" id="bold-btn">
  Bold
</button>
<script>
document.getElementById('bold-btn').addEventListener('click', function() {
  const pressed = this.getAttribute('aria-pressed') === 'true';
  this.setAttribute('aria-pressed', !pressed);
});
</script>

ボタンのアクセシビリティに関するベストプラクティス

ボタンのアクセシビリティチェックリストです。

typeは必ず指定し、デフォルト値に依存しないようにします
アイコンだけのボタンにはaria-labelを使用します
切り替えボタンにはaria-pressedを使用します
無効なボタンでは、フォーカス可能な状態を維持するために、aria-disabled="true"とJavaScriptの組み合わせを検討します
ボタンとして<div>や<span>を使用してはいけません

クリック領域とタッチターゲット

ボタンには、タッチ操作のユーザーが十分にタップできるサイズのターゲットが必要です。

button {
  min-height: 44px;   /* Apple HIG minimum */
  min-width: 44px;    /* WCAG 2.5.5 (AAA) recommends 44x44 -->
  padding: 0.5rem 1rem;
  cursor: pointer;
}

/* Increase tap area without changing visual size: */
button {
  position: relative;
}
button::before {
  content: '';
  position: absolute;
  inset: -8px;
}

クイックチェック

フォーム内のボタンでtype属性を省略すると、どうなりますか？

まとめ：button要素

ボタンの基本事項です。

type="submit" — フォームを送信します
type="reset" — すべてのフィールドをデフォルト値に戻します
type="button" — デフォルトの動作はなく、JavaScriptを紐付けて使用します
typeは必ず指定します。デフォルト値はsubmitです
<input type="submit">よりも<button>を使用します
アイコンだけのボタンにはaria-labelを使用します

よくある質問

「button要素：submit、reset、button」レッスンは無料ですか？

はい。「button要素：submit、reset、button」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「button要素：submit、reset、button」で何を学びますか？

ボタンでフォームの送信、リセット、カスタムアクションを実行します。ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「button要素：submit、reset、button」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← HTML Academyに戻る