開いたら開発者ツールでDOMをインスペクトしてみましょう。 なんと内側のformタグがいなくなってしまっています。 実はHTMLの仕様として、入れ子のformタグは許可されていません。(詳細な話はこちらにのっています→ html - formタグの入れ子とブラウザーの解釈 - スタック・オーバーフロー)

1.HTML&CSS アカウント作成のための入力フォームの作成 レスポンシブにも対応する。 2.javascript（ユーザー操作部分） ①エンターキーを押して次の入力欄に移 … HTML、CSS、JavaScriptの違いと役割についてのまとめ さて3種類の違いと、HTML、CSS、JavaScriptが それぞれ何をしているのか、なんとな～くわかりましたか？ ・HTMLは”顔のパーツ” ・CSSは”お化粧” ・JavaScriptは”動き” もっと勉強し JavaScriptをあまり使いたくない、使えない。 速度の面やSEOとして、CSSで実装したい。 そんな方のために、JavaScriptで実装されがちなものを、HTML・CSSのみで実装してTips フォームの各要素はブラウザによって基本となるデザインが異なります。 デフォルトの状態のフォームをChromeとFirefoxで比較してみました。 Chrome Firefox 分かりにくいですが、文言や大きさや色、アイコンなどほぼ異なってい JavaScriptで文字色と背景色を変更するサンプルです。 サンプルソース 例）id="target"要素の文字色を白、背景色を赤にする [crayon-5f377ed686d4d979737614/] [crayon-5f377ed686d53524827307/] 実行サンプル IE11〜、iOS Safari 9.2〜、Androidブラウザ4.4〜でだいたい動きます（ベンダープレフィックスが必要な場合も）。タブキー移動に対応していない。これ系は、そのまま使うと全部タブキー移動に対応していないので注意してください。送信ボタン押下時に値を渡せないため、結局JavaScriptが必要。これを使うものはぜんぶそんな感じです。requiredなどを入れるだけでバリデートしてくれるようになりました。HTML5になって、「type=”tel”」や「type=”email”」やらいろいろ追加されました。本当の意味で要素を増やすのは無理なので、あらかじめ用意して「display:none」で隠しておく必要があります。画像のwidthとheightをautoにしつつ、max-heightとmax-widthに上限を設ける。現在のCSSでは、トリガーになる（状態が変化する）要素の「子要素・子孫要素」や、トリガー要素以降の「兄弟要素（とその子要素・子孫要素）」にしか、変化を適用できない。編集可能にする「contenteditable属性」を使うと、結局submit時に値を取れないのでJavaScriptで取得する必要がある。また、けっこう使いづらい（コピペをするとスタイルが反映されてしまったりなど）。チェックボックスやラジオボタンなど、「display:none」で消してしまうと、タブキーで移動できない。トリガーのためだけにチェックボックスを用意すると、論理構造としておかしなことになる。セマンティックじゃない（JavaScriptを使えば解決するわけでもないけど）。PCは未対応が多い。現時点（2017年6月）ではFirefox（PC）は、アドレス欄に「about:config」から「dom.forms.datetime」フラグONでそれっぽいものが表示できます。Macはバグってます。テスト文章テスト文章テスト文章テスト文章テスト文章テスト文章テスト文章テスト文章テスト文章テスト文章テスト文章テスト文章 この記事では、各種フォームのCSSを初期化（ブラウザ間での差異をなくし）オリジナルなデザインを再現する方法を紹介していきます！各種フォームを初期化するCSSを紹介します。まずは難しいことを考えずにコピペして動きをみてみてください！その後にデベロッパーツールなどで各値を変えながら覚えていくのがいいかと思います。ちなみに、この辺りがより詳しく解説されているのが「これからの「標準」を身につける HTML+CSSデザインレシピ」なので、こちらも合わせて読むとより理解が深まるはずです。セレクトボックスが最もブラウザ間で異なるんじゃないかと思います。特に右にあるアイコンの表示ですね・・・。色んな形のアローアイコンが登場するので、ここの画像については「icooon-mono」さんなどのフリーのアイコンサイトからダウンロードして使わせてもらうと手軽かと思います。ボタンも各ブラウザによって癖がめっちゃあります。しかもボタンはフォーム作ったら必ず出てくる要素なので、この書き方を確実に押さえておきましょう。初期化して → 自分のオリジナルなデザインを当てていくという感じですね。ファイル選択のフォームはめちゃくちゃ曲者です・・・。JavaScript（jQuery）の力を利用させてもらって無理やりデザインを作っています。今回のCSSを適応させたフォームを再び見比べてみましょう。冒頭で紹介した時と比べて、違和感ないほど同じデザインになっていることが分かります！フォームのCSSを初期化する方法を紹介しました。フォームのデザインを再現するコーディング作業は実務でも頻繁に登場するので、自身でも扱えるようにしておきましょう。とはいっても暗記する必要はなく、ほとんどは決まりきった指定方法になります。どこを変更すれば色が変わるのか？サイズを変更できるか？などが分かれば大丈夫です。WordPressが好きなフリーのWebコーダー。300件以上のWordPressカスタマイズを対応してきました。SE → 農家 → アフィリエイター → Web屋。生まれは三重県。「だれに見せても恥ずかしくないサイト」を目指し、みなさまにとって有益な情報を提供できるよう日々、精進していきます。