![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
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>
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
基本形
<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"
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_16.png?8acaa2e)
No.1
- 回答日時:
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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- CGI perlで書いたcgiでsqliteの使い方を教えてください 2 2023/05/08 21:29
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript Javascript初心者|jQueryの.val()で値を取得し複数の要素を連結させる方法知りたい 2 2022/06/02 12:06
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- その他(プログラミング・Web制作) seleniumbasic chrome操作について 1 2023/03/29 15:40
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
複数のボタンを等間隔に、かつ...
-
<div id="container">の使いか...
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
div要素が重なってします
-
ブログのサイドバーが下にくる
-
1時間30分を簡単に表したいで...
-
inline-blockをネストすると表...
-
divの中に外部のHTMLを埋め込む
-
横並びdivで一部の初期高さがず...
-
3カラムレイアウトで「常に残り...
-
background-imageを徐々変化さ...
-
一括で全体を右にずらす
-
SEOの観点から特殊記号はどのよ...
-
<PRE></PRE>内の<h1></h1>をそ...
-
h1のテキストサイズよりh2の方...
-
スライド部分のリンクが貼れな...
-
セクションをdivで囲むと見出し...
-
ヘッダーとフッターだけ背景を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
div要素が重なってします
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
min-heightとheightの違いについて
-
ヘッダーとフッターだけ背景を...
-
1時間30分を簡単に表したいで...
-
要素間、要素内に隙間が空く
-
画面を縮小するとカラムが落ち...
-
h1のテキストサイズよりh2の方...
-
divの中に外部のHTMLを埋め込む
-
スペースを使わず文字位置を揃...
-
<!-- #BeginLibraryItemとは
-
hタグの右横に画像を表示
-
グリッドレイアウトで"auto-fit...
-
セクションをdivで囲むと見出し...
-
開閉式の隠し要素が一瞬表示さ...
-
html5でheaderの中にnav
おすすめ情報