あなたのウェブサイト上で簡単なサインアップと登録フォームを顧客に提供することは、リードをキャプチャし、あなたの電子メールリストを成長させ、全体的な売上を高めるために不可欠です。
ただ一つの問題があります：HTML。
HTML5は、ほとんどのwebページを動作させるために使用される標準コードです。 それはインターネットの言語です。 しかし、JavascriptやjqueryからPHPやCSS3までのプログラミング言語と同様に、特にコードに触れたことがない場合は、急な学習曲線があります。
私たちは助けるためにここにいます。 私たちは一晩ビル-ゲイツにあなたを回すことができるかもしれませんが、いくつかの有用な例の助けを借りて、このチュートリアルの終わりまでに、あ
¶始める前に:HTMLを使う手間を省きたいですか? Paperformのようなフォームビルダーを使用すると、時間を節約し、数分で強力な、専門的な登録フォームを作成することができます。
HTML登録フォームを作成するための5つのステップ
あなたは忙しい、私たちは知っています。 読むべき兆の記事があります。 Netflixの映画を見る。 テレビはどんちゃん騒ぎに示しています。 それでは、HTMLで登録フォームを作成するための五段階のガイドにまっすぐに取得してみましょう。
ステップ1。 HTMLエディターを選択する
テキストドキュメントを作成するためにワードプロセッサが必要なのと同じように、HTMLコードを作成するためにテキストエディタが必要です。 これらの開発ツールは、あなたが入力した奇妙で素晴らしいコードを登録フォームに変換します。
市場には数十（数百ではないにしても）のHTMLエディタがあり、そのほとんどは同様の機能を提供する傾向があります。 私たちは詳細についてはあなたを退屈させませんが、あなたの人生を楽にするいくつかの重要なことがあります：
エラー検出: 修正を容易にするために、構文エラーを自動的に強調表示します。
自動補完：以前の変更に基づいて関連するHTML要素を提案します（長いコードで時間を節約できます）。
構文のハイライト:コードを読みやすくソートしやすくするために、特定のカテゴリに基づいて異なるHTMLタグに色を適用します。
検索と置換:それぞれを個別に編集するのではなく、特定のコードのすべてのインスタンスを見つけて上書きします。
あなたが本当にコーディングに入っているなら、心配するべきより多くの機能がありますが、それはこの単純な登録フォームのためにあなたをカバーす
あなたが選択したアプリは、個人的な好みの問題です。 お使いのブラウザで使用できる何かをしたいですか？ Codepenを試してみてください。 ベアボーン? メモ帳++. 最小限のUIと直感的な入力フィールド？ 崇高なテキストのすべての方法。
私たちの共同創設者であり居住者であるcode-geek、DeanはVS Codeによって誓います。
“オタクの観点からは、VS CodeはPaperformの技術スタックにぴったりとフィットし、私が愛する素晴らしいリモート開発プラグインを持っています。 それはあまりにもHTMLのもののための素晴らしいことだし、あなたはまだあなたが必要とするすべての機能を持っている間、あなたのツールが素敵に見
これに固執する必要はあまりありません。 残念ながら、どんなに素晴らしいかもしれませんが、あなたのために登録フォームを生成するHTMLエディタはありません。 その部分はすべてあなたの上にあります。
ステップ2。 HTMLファイルを作成する
次のステップは、HTMLファイルを作成するつもりであることをテキストエディタに伝えることです。 これを行うには、新しいファイルを作成し、”で保存します。html”拡張子。
たとえば、”myform.html”。 HTMLコードを作成していることをエディタに通知すると、次のコードが自動的に生成されます:
<!DOCTYPE html><html><head> <title></title></head><body> </body></html>💡 ヒント:一部の編集者は自動入力しません。 いいんだ 上記のコードをコピーして貼り付けるだけで、同じ効果が得られます。
ステップ3。 テキストフィールドを追加し、フォーム
を作成します。 関連するコードの追加を開始し、そのベアボーンHTMLを登録フォームに変換する時が来ました。
今、あなたは私たちが理解しているコードのためにここにいるのであれば。 あなたは、以下の段落または二つを必要とするすべてを見つけることができます。 先にスキップして自由に感じます。 👇
しかし、あなたが実際に入力しているものについて少し学ぶことに興味があるなら、私たちに迅速なhtmlチュートリアルinterludeを許可してください。
HTMLフォームは”フォーム要素”で構成されています。 これらは、人々があなたのライブフォームと対話することを実際に可能にするテキストボックス、ラジオボタン、チェックボックス、ドロップダウン
各要素には固有のタグがあります。 たとえば、HTMLの<form>タグはコードをフォームとして定義しますが、<textarea>はユーザー入力を収集するために使用できます。
これらの要素は靴のようなものです。 フォームに含めるすべてのタグは、open<form>タグとclosed</form>タグの間に挿入する必要があります。
さて、それはSparknotesです。 今、コードのためにあなたは実際に入力する必要があります。 ここでは、:
<!DOCTYPE html><html> <head> <h1> Company Registration Form</h1> </head> <body> <form> <table> <tr> <td> Email Address: </td> <td> <input type="text" email=""> </td> </tr> <tr> <td> Password: </td> <td> <input type="Password" name=""> </td> </tr> </table> </form> </body> </html>この（基本的な）HTMLコードは、次のようなものを出力します:
正確には世界で最高のものではありませんか？ がこんにちは、どうしたらよいかと問われるのをドキュメントを編集するには、登録です。 メッセンジャーを撃つな
タグ<tr>は、回答を行に配置するように指示しますが、<td>（テーブルデータの略）は、回答者が入力したものをキャプチャする道標です。 この例では、簡単にするために2つのフィールドを追加しました:
- メールアドレスを入力してください
- パスワードを入力してください
追加のフィールドを追加することを止めるものは何もありません。 入力タイプは、数値や日付から色、さらには画像まで多岐にわたります。 以下のコードをコピーして、必要な入力タイプを挿入するだけです。 W3Schoolsにはあなたを導く素晴らしいリストがあります。
<tr> <td> Email Address: </td> <td> <input type="text" email=""> </td>💡 ヒント:正しい入力タイプを選択することは非常に重要です。 これは、テキストが画面にどのように表示されるかをフォームに指示します。 たとえば、最後に欲しいのは、誰かがパスワードを入力したときに表示されるようにすることなので、”password”入力タイプを使用して隠します。
ステップ4。 プレースホルダの追加
プレースホルダとは、フォームフィールド内のテキストで、回答者に特定の方法で回答するように促します。 これは主に正しい方向へのナッジとして使用されますが、フォームをより魅力的にするための有用な戦略でもあります。
たとえば、フォームに単純な名前フィールドを追加しているとします。 あなたは”挿入名”を入力してそれを行うことができます、またはあなたは才能のビットのために”ブルース*ウェイン”を書くことによって物事をスプルース
どのような戦略のために行く、それはあなたのHTML登録フォームにプレースホルダーを追加するのはかなり簡単です。 入力タイプの後に、表示するテキストと一緒に”placeholder=”を挿入します。
<!DOCTYPE html><html><head><h1> Company Registration Form</h1></head><body><form><table><tr><td>Email Address:</td><td><input type="mail" placeholder="Email" name=""></td></tr><tr><td>Password:</td><td><input type="Password" placeholder="Password" name=""></td></tr></table></form> </body></html>このコードを入力すると、次のようなフォームが生成されます:
かなりベアボーン。 しかし、それは動作します。 上記のコードと同様のコードを使用して、顧客が年齢や性別などの人口統計を選択するための追加オプションを作成できます。
性別フィールドを作成するには、コードに次の値を挿入します（最後の</table>タグのすぐ上）。 また、電話番号とドロップダウンの”件名”オプションを追加します。
<input type="checkbox" name="Male" value="Male"> Male<br> <input type="checkbox" name="Female" value="Female"> Female<br>これにより、データフィールドがチェックボックスに変わります。 ここでは、HTML登録フォームの最終的な反復がどのように見えるかを示します:
あなたが期待していた壮大な明らかではありませんよね？ あなたは誰かがGoogleであなたのビジネスを検索し、このページに会って想像できますか？ またはソーシャルメディア上でこれを共有？
この種のHTMLログインフォームは、誰もがあなたのビジネスにサインアップすることを正確に奨励しないと言っても安全です。 彼らの心には一つの圧倒的な一つの質問がありますが、それはおそらくあなたが持っているのと同じものです。 . .
なぜ私のHTML登録フォームはとても醜いですか？
あなたが見ることができないようにあなたのHTMLフォームは特に魅力的ではありません。 それは醜いアヒルの子のビットです。 それは大丈夫です—私たちはすべてMargot Robbieになることはできません—しかし、それは人々にそれを記入するように誘惑するものではありません。
そしてそれが問題です。 HTMLフォームは次のようになる傾向があります:
- 退屈な
- 退屈な
- カスタマイズするのが難しい
- 管理するのが不格好な
これはHTMLの単純な性質に帰着します。 これは、必要なフォームアクションを完了するのに役立ちますフレームワークですが、それは確かに任意のデザイン賞を獲得しません。
この問題の簡単な解決策は、HTMLやCSSの重い持ち上げを避けるためにPaperformのような専用のオンラインフォームビルダーを使用することです。 あなたは美しい登録、コンタクトフォームと完全なランディングページを構築することができます—他の作品の何百もの中で—コードの単一行なしで数分で。
しかし、多分あなたは本当にHTML全体のことに設定されています（または多分あなたは罰のための吸盤です）。 いずれにしても、HTML登録フォームに本当にコミットしている場合は、CSSを使用して外観を改善できます。
ステップ5: CSSでHTML登録フォームを編集する
CSSはHTML文書のスタイルを設定するために使用されるプログラミング言語です。 HTML要素が画面に表示される方法をカスタマイズし、フォントの色や不透明度から背景画像の追加、<href>タグを使用した別のページへのリンクまで、す
今、私たちはそれぞれ、すべてのCSSプロパティをリストした場合、あなたはすべての週ここになります。 私たちはそれを行い、このページのSEOを試してみて、後押しすることができますが、それは誰のための楽しみではありません。 包括的なリストを探している場合は、W3SchoolのCSS参照リストをお勧めします。
私たちのチュートリアルのために、私たちは私たちのHTML登録フォームにCSSで迅速な変身を与えるでしょう。 私たちは、テキストの色、フォントスタイルをカスタマイズし、すべての周りの（わずかに）より良い外観のための余白を微調整します。ヒント：HTMLページにCSSを追加する最も一般的な方法は、要素にリンクされた外部スタイルシートファイルを使用することです。 このスタイルシートは、同じテキストエディタで作成され、”で保存されます。css”の拡張子。
ここで使用するコードは次のとおりです:
table {font-family : Arial, Helvetica, sans-serif;font-size : 100%; font-weight: bold; background-color: white} h1 { color: #ea503f; font-family: Arial; text-align: center }そして、そのスタイリングの魔法で、あなたのフォームは以下のようになります。 それは豚に口紅を叩くようなものですが、それは少し程度の方が良いです。
HTML登録フォームが最良の解決策ではない理由
基本的な登録フォームをコーディングして作成する方法を学 それをブートストラップしようとしないでください、それは時間、労力と欲求不満の価値はありません。
あなたのクライアントのためのコンタクトフォーム、あなたのビジネスのためのログインフォーム、または新しい学年のための学生登録フォームが必
ありがたいことに、はるかに簡単で、より速く、より直感的な登録フォームを構築する別の方法があります：Paperformのようなオンラインフォームビルダー。 私たちの簡単なプラットフォームを使用すると、ほんの数分で美しい、ブランドの形で起動して実行することができます。
Paperformを使用すると、基本的なHTMLフォームを取得するだけではありません。 簡単な連絡先の詳細から複雑な計算、さらには支払いまで、必要なあらゆるタイプのデータを収集することができる動的な体験を得ることができます。 設計の専門知識は必要ありません。
さらに、カスタマイズは簡単です。 色やフォントを微調整し、数回のクリックでフォームのUIを調整します。 その後、あなたの新しい創造に満足したら、あなたのウェブサイトにフォームを埋め込み、無料でオンラインでホストしたり、WordPressプラグインを使用してWordPress
それがいかに簡単であるかを示すために、私たちはおしゃれに見える登録フォームをホイップしました：
あなた自身の創造を構築するように感じ それは600+フォームテンプレートの私たちのライブラリが何のためにあるかです。 私たちの登録テンプレートのいずれかを選択し、ワンクリックでアカウントに追加し、あなたの朝のエスプレッソを飲むことができるよりも速く起
登録フォームは、Paperformでできることの始まりに過ぎません。 クレジットカードは必要ありません-私たちの14日間の無料トライアルで自分でそれを試してみてください。
HTMLでの登録フォームFaq
CSSを使用せずにHTML登録フォームを作成できますか？
はい、しかし、それはきれいではないでしょう。 実際には、それはMicrosoftの初期の頃から何かのようになります。 まったくきれいではありません。
画像をアップロードしてHTML登録フォームを作成するにはどうすればよいですか？
画像アップロードフィールドを追加するには、”ファイル”入力タイプを使用します。
テーブルを使わずにHTMLフォームを作ることはできますか？
tableコマンドは整列に役立ちますが、それなしでフォームを作成するのは簡単です。 ‘Tr’または’td’コマンドなしで直接入力するだけです。
オンラインショッピングにHTML登録フォームを使用することは可能ですか
はい。 オンラインショッピングフォームを作成するには、連絡先情報、配送先住所、製品IDと配送ポイントのフィールドが含まれています。 支払いを収集するときに物事がトリッキーになるので、Paperformの簡単な支払いフォームをお勧めします。
ログインと登録ページを作成するにはどうすればよいですか？
これらを作成する方法を説明しましたが、答えは多くのコードと微調整です。 Paperformのような専用のオンラインフォームビルダーを使用する方がはるかに簡単です。