おしえて

HTMLのバリデーション処理

締切済

質問者：オバケイ
質問日時：2021/12/27 16:52
回答数：2件

HTML5の入力値バリデーションを使用して、各入力項目のinputタグを記述する場合、
以下のような感じで合っていますか？

各項目のチェック条件
・氏名：必須チェック
・郵便番号：必須チェック、半角数字3桁、半角ハイフン、半角数字4桁の形式（例：123-4567）
・年齢：必須チェック、半角数字のみ入力、0～120までの入力のみ可能
・URL：url形式

<body>
<main id="content">
<form method="post">
<div>
<label for="name">氏名</name>
<input id="name" required />
</div>
<div>
<label for="zipcode">郵便番号</name>
<input id="zipcode" pattern="\d{3}-?\d{4}" required />
</div>
<div>
<label for="age">年齢</name>
<input id="age" min="0" max="120" required />
</div>
<div>
<label for="url">URL</name>
<input id="url" type="url" />
</div>

<div>
<input type="submit" value="送信" />
</div>
</form>
</main>
</body>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： Ogre7077
回答日時：2021/12/29 23:26

基本形

<label> 見出し <input name=xxx type=text> </label>

input 属性 / 郵便番号
type=text pattern="\d{3}-\d{4}"

input 属性 / 整数範囲
type=number min=0 max=120
type=text pattern="[0-9]|[1-9][0-9]|1[0-1][0-9]|120"

- 0
- 件

通報する

No.1

回答者： t_fumiaki
回答日時：2021/12/27 18:02

nameとsubmit以外は、typeが必要。

pattern="\d{3}-?\d{4}"
↓
pattern="\d{3}-\d{4}"

纏めると
<div>
<label for="name">氏名</name>
<input id="name" required />
</div>

<div>
<label for="zipcode">郵便番号</name>
<input type="text" id="zipcode" pattern="\d{3}-\d{4}" required />
</div>

<div>
<label for="age">年齢</name>
<input type="number" id="age" min="0" max="120" required />
</div>

<div>
<label for="url">URL</name>
<input id="url" type="url" required/>
</div>

<div>
<input type="submit" value="送信" />
</div>