navigation>年末年始休業につきまして【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。今回はHTML5に新しく加わったdatalist要素を使ったフォームの作り方を紹介します。datalist要素とはinput要素にサジェスト機能を追加する要素です。type=”text”>や<select>を使うことが多いですが、datalist要素を使うことで、これら両方の入力形式を一つのフォームで併せて実現することができます。datalist要素を使ったフォームの実装デモ次のフォームにテキスト入力もしくはダブルクリックしてメニューを選択してください。これら選択肢のいずれかを選ぶとフォームに選択肢のテキストが入力されます。テキストはもちろん後で修正できます。※safariやIE9以下といったdatalist要素に未対応のブラウザの場合、選択肢が表示されません。chromeでご確認ください。datalist要素を使ったHTMLの記述の仕方では実際にdatalist要素を使ったフォームを実装してみます。実装のHTMLはこちら。</datalist></form>datalist要素の中に入れたoption要素が入力候補となる選択肢となります。input要素とdatalist要素を関連づけるにはdatalist要素のid属性とinput要素のlist属性に同じ値を指定します。input要素の直下にdatalist要素がある必要はなくdatalist要素と要素の内容はフッターにまとめて記述しておくといった使い方もできます。input要素にlistタグがない場合の対応方法CRMやカートシステム等でdatalist要素を使いたい時に、datalist要素とその内容は追加で記述することはできるけど、関連付けするためのinput要素に対してlist属性をうまく挿入することができないといった場合があります。いった場合は次のようにJavascriptを使ってinput要素にlist属性と値を追加することで解決しましょう。);</script>終わりにdatalist要素はフォームに自由入力もできるけど、頻繁に入力されるであろうワードがいくつか想定される際、選択肢から選ばせるようにしてユーザーの入力効率をよくしたいといった場合に利用するとよいでしょう。現時点では未対応のブラウザがあるので使いづらい点もあるかもしれませんが試しに使ってみるのも良いかと思います。”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。・レスポンシブECサイトがなぜ今選ばれるのか・これまでのECサイトの課題とは何なのか・どのようにすれば解決できるのかといったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。無料パンフレットを請求するABOUTモバイルファーストマーケティングラボとは、スマートフォン/タブレット/PCに対応したレスポンシブECサイトの構築や成功事例の最新情報を発信するブログです。業務ソフトウェア会社にて営業職を担当。ソフトウェアを深く理解したい、サービス開発に自ら携わりたいという思いから開発職に転身。お客様の目線、ニーズをふまえた理想のサービスを提供できるよう日々、開発に取り組んでいます。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。自社ECサイト運営でASPをオススメする理由モバイルファーストラボ。