HTML形式の登録フォーム-htmlチュートリアル-php.cn

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

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

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

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

HTML フォームの作成には、

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

、、などの他の HTML 要素と合わせて、完全に機能するフォームをデザインできます。さらに、CSS を利用して外観とユーザーエクスペリエンスを向上させることもできます。

注: Web 開発が初めてで、基本的な HTML コードの記述方法を学びたい場合は、HTML での Web ページのデザインに関する記事をご覧ください。 HTML コードを記述するためのステップバイステップのガイドを提供します。

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

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

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

構文:

<form action = "URL" method = "GET or POST">
form elements like submit or reset buttons, input, text area etc.
</form>

ログイン後にコピー

HTML での登録フォームの例

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

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

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

コード:

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<form>
<div class="container">
<h1>Register Here</h1>
<p>Please fill in the details to create an account with us.</p>
<hr>
<label for="email"><b>Enter Email</b></label>
<input type="text" placeholder="Enter Email" name="email">
<label for="pwd"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pwd">
<label for="confirm"><b>Confirm Password</b></label>
<input type="password" placeholder="Confirm Password" name="confirm">
<hr>
<p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
<button type="submit" class="registerbtn"><strong>Register</strong></button>
</div>
<div class="container signin">
<p>Already have an account? <a href="#">Sign in</a>.</p>
</div>
</form>
</body>
</html>

ログイン後にコピー

出力:

HTML形式の登録フォーム

登録フォーム: 検証

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

要素にキーワード「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>

ログイン後にコピー

出力:
HTML形式の登録フォーム

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

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

コード:

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<h2>Job Application Registration</h2>
<form action="/apply" method="POST">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" required>
<label for="resume">Resume (PDF or Word):</label>
<input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx" required>
<label for="position">Position Applied:</label>
<select id="position" name="position" required>
<option value="">Select Position</option>
<option value="frontend-developer">Frontend Developer</option>
<option value="backend-developer">Backend Developer</option>
<option value="graphic-designer">Graphic Designer</option>
</select>
<input type="submit" value="Submit Application">
</form>
</body>
</html>

ログイン後にコピー

出力:
HTML形式の登録フォーム

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

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

コード:

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<img src="image.jpg" alt="Hotel Image" style="display: block; margin: 0 auto 20px; width: 500px;">
<form>
<div class="form-row">
<label for="name">Name</label>
<input type="text" id="name" name="name">
</div>
<div class="form-row">
<label for="email">Email ID</label>
<input type="email" id="email" name="email">
</div>
<div class="form-row">
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone">
</div>
<div class="form-row">
<label for="guests">Number of Guests</label>
<input type="number" id="guests" name="guests">
</div>
<div class="form-row">
<label for="check-in">Check-in Date</label>
<input type="date" id="check-in" name="check-in">
</div>
<div class="form-row">
<label for="check-out">Check-out Date</label>
<input type="date" id="check-out" name="check-out">
</div>
<div class="form-row">
<label for="room-type">Room Type</label>
<select id="room-type" name="room-type">
<option value="">Select Room Type</option>
<option value="single">Single</option>
<option value="double">Double</option>
<option value="suite">Suite</option>
</select>
</div>
<input type="submit" value="Submit">
</form>
</body>
</html>

ログイン後にコピー

出力:

HTML形式の登録フォーム