ساخت فرم تماس با ما در html
ساخت فرم تماس با ما در html همراه با مثال و توضیح کامل کدهای آن. این فرم زیبا را می توانید در پروژه های خود استفاده نمایید.
در این بخش از آموزش html از تاپ سایت 98 به سراغ توضیح فرم تماس با ما می رویم.
کد html ساخت فرم تماس با ما :
کد html ساخت فرم تماس با ما شامل قسمت های مختل می باشد که همه را توضیح می دهیم.
در این بخش ما یک h1 داریم که عنوان صفحه را در آن قرار دادیم.
سپس یک div و یک فرم با عناصر مورد نیاز. حال به توضیح همه این عناصر می پردازیم.
کد کامل فرم تماس با ما در انتهای صفحه وجود دارد اگر نیازی به توضیحات ندارید می توانید آن را در یک فایل html قرار داده ذخیره و سپس اجرا کنید.
بخش div :
در بخش div با کلاس container یک باکس ایجاد کردیم که یک فضای مشخص را بگیرد.
فرم تماس با ما در این div قرار گرفت .
تگ form در html :
تگ فرم (form ) برای شروع ساخت فرم تماس با ما در html مورد نیاز است.
تمام عناصر فرم در آن قرار داده میشود.
تگ form دارای چندین ویژگی می باشد اولین ویژگی action است که آدرس فایل php را در آن قرار می دهید.
ویژگی دیگر متد است که دارای دو مقدار GET, POST است و به نسبت نیاز از آنها استفاده می کنید.
اگر در فرم ارسال عکس یا فایل داشتید از ویژگی enctype استفاده می کنید مقدار آن را می توانید multipart/form-data قرار دهید.
تگ form دارای تگ باز و بسته میباشد .
تگ label :
تگ label در html و زیرمجموعه فرم ها میباشد.
از تگ label یا برچسب برای گذاشتن یک راهنما استفاده می کنیم. مثلا نام خانوادگی
و کاربر متوجه می شود منظور شما این است که باید در ورودی زیر نام خانوادگی را وارد کنید.
تگ label دارای تگ باز و بسته است و داخل ان نیز متن مورد نظر قرار می دهید مانند First Name.
یکی از ویژگی های label ویژگی for است که مشخص می کند که این راهنما متعلق به کدام ورودی میباشد.
تگ input :
تگ input یکی از تگ های مهم فرم است که دارای انواع مختلفی میباشد. انواع input ها عبارتند از text که در فرم تماس با ما استفاده کرده ایم.
انواع دیگری نیز وجود دارد مانند button , file , password و غیره.
تگ select فرم تماس با ما :
تگ select فرم تماس با ما که در آن می توانیم یک لیست را نمایش دهیم تا کاربر بتواند فقط از آن لیست یکی را انتخاب کند مثل انتخاب شهر
با تگ select انتخاب کاربر را محدود می کنیم و کاربر نمی تواند هر چیزی را وارد کند.
تگ texterea :
تگ texterea در html و فرم تماس با ما برای ورود اطلاعات زیاد و توضیحات استفاده میشود.از این تگ در بسیاری از فرم ها استفاده می شود. در این تگ اطلاعات و توضیحات اضافی قرار داده می شود.
دکمه یا submit :
از دکمه یا submit برای ارسال اطلاعات استفاده می شود. وقتی فرم را پر کردیم این دکمه را کلیک می کنیم.
برای دکمه از input و نوع submit استفاده می کنیم.
کد css ساخت فرم تماس با ما :
پس از ساخت فرم تماس با ما در html به سراغ کد css آن می رویم تا تغییراتی روی آن اعمال کنیم و آن را زیباتر کنیم.
در فرم زیر با استفاده از css فرم را زیبا کردیم.
ابتدا برای div با کلاس container سایز مشخصی را قرار دادیم.
سپس برای ورودی ها یعنی input,select,textarea اندازه 100 در صد را مشخص کردیم تا همه ، هم اندازه شوند و در یک راستا قرار بگیرند.
و برای آنها padding و margin قرار دادیم.
در انتها برای زیباسازی دکمه فرم ، پس زمینه و رنگ متن را تغییر دادیم.
کد کامل ساخت فرم تماس با ما در html :
کد کامل ساخت فرم تماس با ما در html را در یک فایل با پسوند html قرار دهید و تست کنید.
از این کد می توانید در پروژه های خود استفاده نمایید.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
}
.container{
width: 800px;
}
input,select,textarea{
width: 100%;
margin: 0 0 10px 0;
padding: 10px;
}
.btn1{
background-color: green;
color: #fff;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<div class="container">
<form action="/action_page.php" method="post">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="city"> city </label>
<select id=" city " name=" city ">
<option value="shiraz"> shiraz </option>
<option value="tehran"> tehran </option>
<option value="ahvaz"> ahvaz </option>
</select>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input class="btn1" type="submit" value="Submit">
</form>
</div>
</body>
</html>
کد تست شده است . می توانید از آن استفاده کنید.
امیدواریم این آموزش برای شما مفید باشد.
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید