タグ別アーカイブ: HTML5

HTML：HTML5のrequired属性で必須チェック

Posted on by
1

HTML5でinput要素にrequired属性を設定すると値が存在するかを判定し、必須のチェックをすることができます。

html5_required

※Firefox24.0
※ブラウザによって表示が違います。

指定の仕方はinput要素にrequired属性を記述するだけです。

required="required"

しかし、ブラウザのバージョンや対応していないブラウザもあるようなので、バリデーションの処理はしっかり行う必要があります。

HTML5でinput要素にrequired属性を設定し、必須チェックを行った時の方法をメモします。

■ required属性

submit時に必須チェックを行い、エラーメッセージを出力します。

■ required属性で必須チェック

input要素にrequired属性を設定します

?
1
2
3
4
5
6
7
<form action="" method="post">
 
    <input type="text" name="hoge" value="" required="required" />
    <br>
    <input type="submit" name="save" value="保存" />
 
</form>

値を入力せずにサブミットすると下記のようにエラーメッセージが表示されます。

html5_required

「input」以外にも「textarea」や「select」でも設定することができます。

HTML：HTML5でIE8以下のバージョンに対応させる

Posted on by
返信

HTML5でページを作成するときにIEで表示が崩れてしまうことがあります。
IE8以下だとHTML5に対応していないので、正常に表示させる場合は下記のコードを記述する必要があります。
対応させるには「Google Code」で公開されている「html5shiv」スクリプトを使用します。

■ html5shiv

headタグ内に下記のコードを記述します。

?
1
2
3
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

※JavaScriptをオンにしている必要があります。
※上記のif文はIE9未満の場合という意味です。
※新要素のブロックにCSSを設定している場合はCSSの設定よりも先に指定しないとスタイルが反映されません。

上記の方法でも導入可能ですが、導入方法が変わったそうです。
html5shivダウンロードしたものをサーバにアップし読み込むようにします。
※Google Codeのリポジトリのhtml5shivがバージョンアップしているので、不具合が生じる場合あります。

html5shivのダウンロードページからzipファイルダウンロードし、指定の場所にhtml5shiv.jsをサーバにアップします。

ダウンロードフォルダ\dist\html5shiv.js

jsフォルダにアップした場合、下記のように設定します。

?
1
2
3
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->

■ CSS

HTML5の新要素で、ブロックボックスとしてレンダリングさせる要素に「display: block」を指定します。

?
1
2
3
article, aside, figure, footer, header, hgroup, nav, section {
    display: block;
}