creatersnest58

HTML5で進化したフォームの機能と実装の仕方が分かる!おすすめ記事20選


HTML5がリリースされて、form要素で使える13個のtype属性の属性値と、8個のinput要素の属性、と5個の要素が追加になりました。
それぞれの要素・属性について詳細を説明したページを紹介して行きます。
こちらの記事を参考に、HTML5の特性を生かしたサイト作りをして頂けたらと思います。

HTML5で追加されたtype属性

sample01

htmq.com

このページではHTML5で追加された新しい入力形式を一覧にまとめていますので、どんな種類の入力形式があるのかを確認する事ができます。
また、実際に値を入力するサンプル画面が付いていますので、どのように入力したらエラーで、どのように入力したらエラーが出ないのか試してみる事が出来ます。

 

各type属性のブラウザ別の対応

sample02

liginc.co.jp

このサイトは、HTML5で追加された入力形式が、2013.07.24時点でどのブラウザでどれだけ対応されているのかを確認する事が出来ます。
こちらは、PCだけでなくスマホで実装した際のサンプル画面も掲載されています。

 

新type属性の使われ方

sample03

ascii.jp

このページは、この入力形式を使うと、これまでのテキストボックスを使うのと何が変わるのか、具体的なスマホの入力パネルの画像を載せて説明しています。
また、よく使う属性の説明もあります。

 

HTML5で追加されたtype属性以外の属性

sample04

honttoni.blog74.fc2.com

こちらのページは、新機能の入力形式の各属性についての説明が載っています。
また、各属性を使ったサンプルコードもあり、そのサンプルコードで、どのような入力チェックをしているのか、サンプル画面も交えて書いてあります。

 

HTML4までのtypeにもHTML5の新属性が使える

sample05

atmarkit

これまでの入力形式(textboxやtextareaなど)にも、HTML5で追加された属性が使えます。
その例が、コードとサンプル画面と掲載されています。
各属性の詳細な説明もあります。

 

HTML5で追加されたformで使える要素

sample06

heo.jp

HTML5では、input要素だけでなく、form要素の中で使える色々なタグが出来ました。
それらの要素の一覧が紹介されています。
簡単なコードサンプルと説明も載っています。

 

HTML5で計算が出来るoutput

sample07

tagindex.com

このページでは、HTML5で追加になったoutput要素がどのように使われるのかを、サンプルを交えて説明しています。
実際に計算をする処理のコードや、値を入力して計算がされる画面を見る事が出来ます。

 

HTML5で公開鍵・秘密鍵が作れるkeygen

sample08

htmlcss.jp

HTML5では、公開鍵・秘密鍵が作成出来るようになり、認証のセキュリティーが高まる事が期待されます。
こちらのページでは、鍵生成の流れや属性、コードサンプルが簡単にまとめられています。

 

HTML5で進化したリストボックスdatalist

sample09

shirokumaoshiri.wordpress.com

HTML5になってから、ダブルクリックでリストが表示され、選択肢以外の値も入力出来るようになりました。
こちらのページでは、これまでのリストボックスとHTML5で新しく出て来たdatalistの違いを、分かりやすく説明しています。

 

HTML5で進行状況を絵で表せるprogress

sample10

html5.cyberlab.info

HTML5で進捗状況の絵を入れる事が出来るようになりました。
このページでは、progress要素の使い方が3パターン載っています。
また、各パターン、サンプル画面が載っています。

 

HTML5で測定値を絵で表せるmeter

sample11

webdlab.com

HTML5で使用状況などパーセンテージを絵で表すことが出来る、meter要素が追加されました。
このページでは、HTML5で新しく追加されたmeter要素の使い方を説明しています。
各属性の詳細な説明や、コードサンプル、画面サンプルが載っています。

 

input要素の新属性autofocus

sample12

webdev-nekodama.xii.jp

ページを開いた時に、カーソルを当てておきたい箇所を指定できる、autofocus属性が追加されました。
このページでは、HTML5で新しく追加されたautofocus要素について説明しています。
ブラウザ別の対応や、サンプルコード、サンプル画面も載っています。

 

input要素の新属性placefolder

sample13

terkel.jp

HTML5からplacefolder属性が出来て、これまでvalue属性で入れていた値が、入力欄にカーソルを当てると消えるというものになりました。
このページでは、placefolder属性の使い方、サンプルコード、サンプル画面が載っています。
また、オリジナルのplacefolder対応有無を判別したスクリプトも載っています。

 

input要素の新属性required

sample14

raining.bear-life.com

このサイトは、HTML5で新しく追加されたrequired属性について説明しています。
画面サンプルや、エラーメッセージの出方などが書かれています。
コードのサンプルもあります。

 

input要素の新属性pattern

sample15

rikutoto.blogspot.jp

HTML5から、pattern属性に正規表現を使うだけで、入力値チェックをしてくれるようになりました。
このページでは、どのような正規表現でどのような入力値チェックが出来るのか、サンプルコードが書いてあります。

 

input要素の新属性min,max,step

sample16

honttoni.web.fc2.com

HTML5から、minとmaxを使って、入力値の最大値・最小値を制限出来るようになりました。
こちらのページでは、range要素を使って、サンプルコード、サンプル画面を載せています。
step属性で指定した値ずつ、左右にずれて行くのが分かります。

 

input要素の新属性autocomplete

sample17

html5.cyberlab.info

HTML5から、入力値の自動補完が出来るautocomplete機能が付きました。
こちらのページでは、autocompleteを使った簡単なコードサンプルや、実際に入力出来るサンプル画面の掲載があります。
対応している入力形式一覧もあります。

 

input要素の新属性multiple

sample18

blog.jhashimoto.net

HTML5では、1つのテキストボックスに、カンマ区切りで複数の値を入力出来るようになりました。
ファイルのアップロードも、一辺に出来ます。
このページでは、サンプルコード、サンプル画面が紹介されています。

HTML5でなくなった機能

sample20

html5-guide.com

HTML5になって、いくつかの要素はなくなりました。
こちらのページでは、なくなった理由などがまとめられています。
cssでの外部化や、検索エンジンとの関連がまとめられています。

 

HTML5でなくなった機能一覧

sample19

tagindex.com

こちらのページでは、HTML5でなくなった要素と属性の一覧がまとめられています。
全てリンクで、どのような要素か確認できるようになっています。

 

まとめ

HTML5では、様々な入力チェックが行えるようになりました。
これまでjavascriptで行っていた入力値チェックが、HTML5で楽に行えるようになりましたね。
これからも、HTMLで出来る事がどんどん増えて行くのでしょう。
新しい機能を、積極的に取り入れて行ってみて下さいね。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next ArticleIllustratorのパスが理解できるおすすめ記事15選