HTML Contact Form UI Design

Jan 5, 2021 | Web Designing Course

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;

}

HTML Contact Form

লেখা শেষ করে File Save করে index.html File টি রান করে দেখে নিন।

 

 

এইচ টি এম এল ওয়েব ডিজাইন সম্পর্কে কাজী আইটি জোন এর একাধিক পোস্ট সমূহঃ

এইচটিএমএল পরিচিতি

কি ভাবে ওয়েব পেজে ইমেজ ব্যবহার করবেন?

HTML Class ও ID ব্যবহারের নিয়ম

HTML Contact Form UI Design

HTML Contact Form UI Design

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Adsense

Categories

জনপ্রিয় পোস্ট সমূহ

Pin It on Pinterest

Share This