HTML Contact Form UI Design

Jan 5, 2021 | Web Designing Course

Post Title List

HTML Contact Form UI Design

How To Create HTML Contact Form

HTML Contact Form UI Design. একটি ওয়েব সাইটের জন্য Contact Form খুবই জরুরি। HTML ব্যবহার করে Contact Form UI তৈরি করা যায়। HTML Contact Form তৈরি করার জন্যি HTML এর কিছু ট্যাগ আছে। ট্যাগ গুলো ব্যবহার করে খুব সহজেই HTML Contact Form তৈরি করার যায়। How to create HTML Contact Form নিয়মিত ওয়েব ডিজাইন এন্ড ডেভেলপমেন্ট টিপস পেতে Kazi IT Zone সঙ্গেই থাকুন।

Contact Form UI তৈরি করার জন্য HTML এর যে ট্যাগ গুলো ব্যবহার করা হয় তা নিম্নে দেওয়া হলোঃ

<form></form>, <input></input>, <label></label>, <textarea></textarea>

এই ট্যাগ গুলো ব্যবহার করে সম্পূর্ণ Contact Form UI তৈরি করা যায়।

একটি index.html File তৈরি করে কোড গুলো লিখে নিন

<!DOCTYPE html>

<html>

<head>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<link rel=”stylesheet” href=”style.css”>

</head>

<body>

<h3>Contact Form</h3>

<div class=”container”>

<form action=”/action_page.php”>

<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=”country”>Country</label>

<select id=”country” name=”country”>

<option value=”australia”>Australia</option>

<option value=”canada”>Canada</option>

<option value=”usa”>USA</option>

</select>

<label for=”subject”>Subject</label>

<textarea id=”subject” name=”subject” placeholder=”Write something..” style=”height:200px”></textarea>

<input type=”submit” value=”Submit”>

</form>

</div>

</body>

</html>

একটি style.css File তৈরি করে কোড গুলো লিখে নিন

body {font-family: Arial, Helvetica, sans-serif;}

* {box-sizing: border-box;}

input[type=text], select, textarea {

width: 100%;

padding: 12px;

border: 1px solid #ccc;

border-radius: 4px;

box-sizing: border-box;

margin-top: 6px;

margin-bottom: 16px;

resize: vertical;

}

input[type=submit] {

background-color: #4CAF50;

color: white;

padding: 12px 20px;

border: none;

border-radius: 4px;

cursor: pointer;

}

input[type=submit]:hover {

background-color: #45a049;

}

.container {

border-radius: 5px;

background-color: #f2f2f2;

padding: 20px;

}