logo
logo
تبلیغ کلیکی تاپ سایت 98

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

ساخت فرم عضویت در 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 درصد فضای صفحه را می گیرد.

<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>

کد کامل ساخت فرم عضویت در 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>

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

یا حق

عزیزانی که تمایل دارند به تیم نویسندگی تاپ سایت 98 بپیوندند می توانند از طریق واتساپ با ما در ارتباط باشند. ما بهترین افراد را به تیم خود اضافه خواهیم کرد.

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

دوره ارز دیجیتال تاپ سایت 98
دوره های آموزشی دوره های آموزشی

نظرات کاربران

از دیدگاه مرتبط با موضوع استفاده نمایید.

از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.

برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.

  • کامنت ناشناس

    2022-03-16 16:03:19

    چرا دکمه ثبت نام رو که میزنیم خطا میده