HTML【個人用ドキュメント】

form

onsubmit属性

「onsubmit」は「formタグ」内の属性として記述するようになっており、submitされた時に起動するイベントです。

preventDefault()メソッド

preventDefault() メソッドは、ユーザーエージェントに、イベントが明示的に処理されない場合にその既定のアクションを通常どおりに行うべきではないことを伝えます。通常submitするとその情報を送信してページを更新することですが、それを防ぐことができます。

formの記述例

//onsubmit属性,event.preventDefault()
<form id="bank-form" class="form" onsubmit="initializeUserAccount(); event.preventDefault()">
    <div class="form-group">
        <input type="email" name="userEmail" class="form-control" placeholder="Email" required>
    </div>
    <div class="form-group">
        <input type="text" name="userFirstName" class="form-control" placeholder="First name" required>
    </div>
    <div class="form-group">
        <input type="text" name="userLastName" class="form-control" placeholder="Last name" required>
    </div>
    <div class="form-group">
        <input type="number" class="form-control" name="userFirstDeposit" aria-describedby="emailHelp" placeholder="Enter your first deposit" required>
    </div>
    <div class="form-group">
        <div class="form-check">
            <input class="form-check-input" type="radio" name="userAccountType" id="userAccountType1" value="savings" checked required>
            <label class="form-check-label" for="userAccountType1">
                Savings
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="userAccountType" id="userAccountType2" value="checkings" required>
            <label class="form-check-label" for="userAccountType2">
                Checkings
            </label>
         </div>
    </div>
    <button type="submit" class="btn btn-primary col-12">Submit</button>
</form>

input

required属性

input要素のrequired属性は、その入力項目が必須属性であることをブラウザに知らせることができる。HTML5では、required属性を設定するだけでJavaScriptによる入力チェックがなくてもエラーメッセージを表示させることが可能。

aria-describedby属性

button