HTML形式の登録フォーム

HTML フォームは、今日の多数の Web サイトで見られる重要なコンポーネントであり、ユーザー認証、登録、フィードバック収集などのさまざまな目的に役立ちます。これらのフォームは、サイトの訪問者からの貴重なデータと情報の収集を容易にします。

HTML フォームは、「コントロール」と呼ばれる特別な要素を使用して構築されます。これらのコントロールには、テキスト領域、ラジオ ボタン、チェックボックス、送信ボタンなどのさまざまなオプションが含まれており、ユーザーは詳細を効果的に入力できます。ユーザーは、テキストを入力したり、特定の項目を選択したり、これらのコントロールを操作してその他の関連アクションを実行したりすることで、提供された情報を変更できます。フォームが完了したら送信できるようになり、データの追加、送信、別のページへのリダイレクト、さらにはデータベースへの詳細の保存など、さまざまな結果が得られます。

HTML フォームは、Web サイト訪問者を惹きつけるためのインタラクティブでユーザーフレンドリーな手段です。ユーザーと Web サイト所有者間のシームレスなコミュニケーションとデータ交換を促進し、企業が重要な洞察を収集してユーザー エクスペリエンスを向上できるようにします。

HTML フォームを作成するには?

HTML フォームの作成には、

の使用が含まれます。要素。フォームコンテンツのコンテナとして機能します。

、

、 などの他の HTML 要素と合わせて、完全に機能するフォームをデザインできます。さらに、CSS を利用して外観とユーザー エクスペリエンスを向上させることもできます。 注: Web 開発が初めてで、基本的な HTML コードの記述方法を学びたい場合は、HTML での Web ページのデザインに関する記事をご覧ください。 HTML コードを記述するためのステップバイステップのガイドを提供します。

この記事で説明する、HTML で Web ページをデザインするための主なポイントは次のとおりです。

1. プロジェクトを設定するにはどうすればよいですか?
2. HTML 構造から始めるにはどうすればよいですか?
3. 本文にコンテンツを追加するにはどうすればよいですか?
4. コンテンツを構成するにはどうすればよいですか?
5. HTML ファイルを保存するにはどうすればよいですか?
6. Web ページを表示するには?

次に、HTML フォームの基本的な構文を示します。

構文:

form elements like submit or reset buttons, input, text area etc.

HTML での登録フォームの例

HTML を使用した登録フォームの例をいくつか見てみましょう:

例 1: 簡単な登録フォーム

簡単な HTML 登録フォームの作成例を次に示します。

コード:

<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
margin-top: 0;
}
p {
text-align: center;
color: #777;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 10px;
color: #333;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #ccc;
}
a {
color: #337ab7;
text-decoration: none;
}
button[type="submit"] {
display: block;
width: 100%;
padding: 10px;
margin-top: 20px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
button[type="submit"]:hover {
background-color: #45a049;
}
.container.signin {
text-align: center;
color: #777;
}
</style>

Register Here

Please fill in the details to create an account with us.

---

Enter Email Password Confirm Password

---

By creating an account you agree to our Terms & Privacy.

Register

Already have an account? Sign in.

出力:

登録フォーム: 検証

ユーザーがメール アドレスを確実に入力できるように、パスワードや確認の入力に関係なく、メール フィールドに入力せずにフォームを送信しようとした場合にポップアップをトリガーする検証コードが含まれます。

要素にキーワード「required」が付いている場合は、その要素を入力する必要があることを示します。このキーワードをテキスト フィールド「電子メール」に追加すると、以下の結果が表示されます。

<input type="text" placeholder="Enter Email" name="email" required>

同様に、「パスワード」フィールドと「パスワードの確認」フィールドでも行う必要があります。

<input type="password" placeholder="Enter Password" name="pwd" required>
<input type="password" placeholder="Confirm Password" name="confirm" required>

出力:

例 2: 求人応募登録フォーム

HTML で求人応募登録フォームを作成する例を示します。

コード:

<title>Job Application Registration Form</title>
<style>
body {
font-family: Calibri, sans-serif;
background-color: #72b7f4;
}
h2 {
color: #232729;
text-align: center; /* Center align the title */
}
form {
background-color: #bfddf7;
max-width: 500px;
margin: 0 auto;
padding: 30px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
color: #333333;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="file"] {
width: 100%;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 15px;
background-color: #ffffff; /* Set background color to white */
}
select {
width: 100%;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 15px;
}
input[type="submit"] {
background-color: #1a73e8;
color: #ffffff;
border: none;
padding: 12px 24px;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0059b3;
}
</style>


<h2 id="Job-Application-Registration">Job Application Registration</h2>

Full Name: Email Address: Phone Number: Resume (PDF or Word): Position Applied: Select Position Frontend Developer Backend Developer Graphic Designer

出力:

例 3: ホテル登録フォーム

HTML でホテル登録フォームを作成する例を次に示します。

コード:

<title>Hotel Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0bd9d;
padding: 20px;
}
form {
max-width: 500px;
margin: 0 auto;
background: linear-gradient(to bottom right, #fff, #f1f1f1);
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
.form-row {
margin-bottom: 20px;
}
.form-row label {
display: block;
margin-bottom: 5px;
}
.form-row input,
.form-row select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 14px;
}
input[type="submit"] {
padding: 10px 20px;
background: linear-gradient(to bottom right, #db4340, #ff6f00);
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
</style>


<img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="Hotel Image"   style="max-width:90%">

Name

Email ID

Phone Number

Number of Guests

Check-in Date

Check-out Date

Room Type Select Room Type Single Double Suite

出力:

以上がHTML形式の登録フォームの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。