🌝

学習記録3_フォームのバリデーション/登録フォームを作ってみる

に公開
HTML
初心者
idea

ひとこと

  • ようやくおわったHTML！大変ではなかったけどちゃんと理解して進むことができた感じある💪

教材

https://www.udemy.com/share/105qh83@ajKGu7peAqJPriZy6R-3rNLTCheyosKEJjzl63HlrI0sLu3IKBx37T1iOOHXWIc1/

学習範囲

  • フォームの続き

ノート📓

  1. フォームのバリデーションとは
  2. HTML属性のrequired
  3. HTML属性のminlength
  4. HTML属性のmaxlength
  5. HTML属性のminとmax
  6. HTML属性のpattern
  7. input属性のemail
  8. input属性のurl
  9. 演習問題: マラソン申し込みフォーム

1. フォームのバリデーションとは

とは、フォームに入力された内容が正しいか (適切か) 検証するために行われるもの

  • メールならメールアドレスの形じゃないといけない
  • パスワードなら英数字8文字以上じゃないといけないとか
  • フロントエンド側でもサーバー側でもバリデーションは実施される
    • なぜ両方か？誤った値を入力し終わってからフォームが送信され、サーバー側で検証されてから「誤ってる」と返されるよりはデータを送信する前に「いま入力したのは誤ってる」としたほうが早いしユーザー体験もいい

2. HTML属性のrequired

https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/required

論理属性の required 属性は、存在する場合、所有するフォームを送信する前にユーザーが入力に値を指定しなければならないことを示します。 required 属性は text, search, url, tel, email, password, date, month, week, time, datetime-local, number, checkbox, radio, file の <input> 型と <select> および <textarea> のフォームコントロール要素で対応しています。

  • <input>の属性にrequiredを追記し、空白でフォームを送信するとこうなる

3. HTML属性のminlength

https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/minlength

minlength 属性は、ユーザーが <input> または <textarea> に入力できる最小文字数を (UTF-16 コード単位で) 定義します。 0 以上の整数値である必要があります。 minlength が指定されなかった場合、または無効な値が指定された場合は、入力欄には最小文字数が設定されません。

  • <input>の属性にminlength="5"を追記し、4文字(5文字未満)でフォームを送信するとこうなる

4. HTML属性のmaxlength

  1. とおなじ

5. HTML属性のminとmax

数値 (<input type="number") における最小値がmin, 最大値がmax

6. HTML属性のpattern

https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/pattern

pattern 属性は、フォームコントロールの値が一致すべき正規表現を指定します。 null 以外の値が pattern 値によって設定された制約に適合しない場合、 ValidityState オブジェクトの読み取り専用の patternMismatch プロパティが真になります。

pattern属性は text, tel, email, url, password, search の入力型の属性です。

  • 正規表現は、ざっくりいうと文字列のパターンを見つけるための記法 ()

7. input属性のemail

https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/email

  • @とその前後に文字列があるかデフォルトで検証してくれる

8. input属性のurl

https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/url

  • 妥当なURLであるかデフォルトで検証してくれる, https:// のようにurlscheme://restofurl の形([プロトコル]://文字列)であればいい

9. 演習問題: マラソン申し込みフォーム

条件

  • 姓名はtext, ラベルは関連づける, required
  • 「参加するマラソンを選択：」は3つの選択肢のラジオボタン, ラベルは関連づいている, required
  • 「メールアドレス」はemail, 「パスワード」はpassword, ラベルは関連づける, required
  • 「参加する年代」はドロップダウン, 数のレンジはなんでもいい
  • 「登録する」を押すと入力した情報が送信される
  • div要素で囲むといいかも

10. 演習課題コード

ラジオボタンだけ「どこを共通する必要があるんだっけ」と忘れかけていた😅

Discussion