ساخت فرم عضویت در html

هدایت عباسی آموزش HTML

در این بخش از آموزش html به سراغ ساخت فرم عضویت در html می رویم. این کد تست شده میباشد می توانید آن را در پروژه های خود نیز استفاده کنید. کد زیر را در یک فایل با پسوند html ذخیره کرده و اجرا کنید.

این آموزش متعلق به تاپ سایت 98 میباشد.

کد html ساخت فرم عضویت :

در زیر کد html ساخت فرم عضویت را مشاهده میکنید.

فرم شامل چندین input است که مقادیر نام و نام کاربری و رمز عبور را از شما می گیرد.

رمز عبور را دو بار تکرار کرده ایم که کاربر اشتباه نکند .

در تگ form یک ویژگی action را مشاهده می کنید. در این قسمت آدرس فایل php قرار می گیرد .

تگ label جهت نمایش راهنما مانند name بکار می رود .

<form action="/action_page.php">
<h1>TopSite 98 Register</h1>
<p>create account</p>
<hr>
<label for="fname"><b>Name</b></label>
<input type="text" placeholder="Enter name" name="fname" required>

<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>

<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>

<button type="submit" class="registerbtn">Register</button>
</form>

کد css ساخت فرم عضویت:

کد css ساخت فرم عضویت را در قسمت زیر مشاهده می کنید.

این کد تست شده می باشد. کدهای css را در یک تگ style و در head قرار می دهیم.

ما یک تگ div داریم که فرم را در آن قرار داده ایم . این تگ 80 درصد فضای صفحه را می گیرد.

کد کامل ساخت فرم عضویت در html:

کد کامل ساخت فرم عضویت در html را در قسمت زیر مشاهده می کنید.

این کد را می توانید در یک فایل html قرار داده و تست نمایید.

همچنین این کد را می توانید در پروژه های خود استفاده نمایید.

هر فرم شامل دو بخش html ,css میباشد. از css برای زیباسازی فرم استفاده کرده ایم.

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
.container {
width: 800px;
padding: 16px;
background-color: white;
border: 1px solid #333;
}
input{
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input:focus{
background-color: #ddd;
outline: none;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
.registerbtn {
background-color: #4CAF50;
color: #fff;
padding: 15px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.registerbtn:hover {
opacity: 1;
}
a {
color: dodgerblue;
}
.signin {
background-color: #f1f1f1;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<form action="/action_page.php">
<h1>TopSite 98 Register</h1>
<p>create account</p>
<hr>
<label for="fname"><b>Name</b></label>
<input type="text" placeholder="Enter name" name="fname" required>

<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>

<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>

<button type="submit" class="registerbtn">Register</button>
<div class="signin">
<p>Already have an account? <a href="#">Sign in</a>.</p>
</div>
</form>
</div>
</body>
</html>

امیدواریم این آموزش برای شما مفید باشد.

یا حق

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید