GHWEB06.GRASSHOPPER

BLOG

HTML5でフォームの作成

  • Category：Web関連 ／
  • Web関連の備忘録

htm5_form1HTML5でフォームの作成をしてみました。対応ブラウザが限られますが、必須項目のチェック等がJS等を使わずHTMLだけで可能です。

HTMLの指定内容とサンプル

<form action="" method="get">
<dl>
<dt>名前</dt>
<dd><input name="" type="text" required></dd>
<dt>メール</dt>
<dd><input name="" type="email" required></dd>
<dt>TEL</dt>
<dd><input name="" type="tel" required></dd>
<dt>URL</dt>
<dd><input name="" type="url" required></dd>
<dt>コメント</dt>
<dd><textarea cols="40" rows="5" required></textarea></dd>
</dl>
<input name="" type="submit">
<input name="" type="reset">
</form>

サンプル

HTMLの指定内容

必須項目のチェックをする

必須項目を行う項目に required の記述をします

<input name="" type="text" required>

メールアドレスのチェックをする

type属性の値を email で指定します。

<input name="" type="email">

URLのチェックをする

type属性の値を url で指定します。

<input name="" type="url">

TELの指定

チェックはしませんが、type属性の値に tel を指定すると
スマホで表示した際、数字で入力が出来ます。

<input name="" type="tel">
  • 掲載: