18
ژوئن

نحوه ایجاد فرم سفارش داده شده در CSS

تراز افقی به سمت بیرون و عمودی به سمت بالا و بالا است. یک وب سایت مدرن با فرم های مرتب ایجاد کنید.


لپ تاپ که کد را روی صفحه نشان می دهد

CSS متعلق به یک کلاس منحصر به فرد از زبان است که به عنوان زبان های سبک صفحه شناخته می شود. این به طور عمده برای تعریف ارائه صفحه وب شما استفاده می شود. در حالی که HTML به شما امکان می دهد نحوه ساختار صفحه خود را مشخص کنید ، CSS همان موردی است که برای قالب بندی آن استفاده می شود. در غیر این صورت با یک وب سایت نسبتاً غیر جذاب روبرو خواهید شد.

تمرکز روی CSS یکی از بهترین روش ها برای بهبود جذابیت وب سایت شماست ، به خصوص هنگامی که صحبت از بهبود تجربه کاربری می شود. با این روش می توانید میزان بازدید خود را نیز افزایش دهید. برای مبتدیان ، می توانید از فرم سفارش داده شده استفاده کنید.

فرم سفارش یافته چیست؟

شکل مرتب به شما امکان می دهد یک فرم تخصصی ایجاد کنید که در آن بتوانید برچسب ها و ورودی های خود را به جای قرار دادن در یک الگوی افقی روی هم قرار دهید.

در اینجا نحوه انجام این کار آورده شده است.

کد HTML را رمزگذاری کنید

از عنصر HTML استفاده کنید ، <форма>برای پردازش اطلاعات شما برای فیلدهای مناسب برچسب اضافه کنید و فیلدهای ورودی مناسب را تنظیم کنید. در این مثال ، از کاربران می خواهیم نام کامل و آدرس ایمیل خود را با نوع فرم وارد کنند متندر حالی که منوی کشویی با استفاده از ایجاد می شود شناسه را انتخاب کنید تا به آنها کمک کند صنعت خود را انتخاب کنند.


<!DOCTYPE html>
<html>
<body>
<h3>What Is a Stacked Form?</h3>
<p>Here's how you create a stacked form.</p>
<div class="container">
<label for="fullname">Full Name</label>
<input type="text" id="fullname" name="firstname" placeholder="Type your full name">
<label for="email">Email Address</label>
<input type="text" id="email" name="email" placeholder="Type your email ">
<label for="dept">Department</label>
<select id="country" name="country">
<option value="IT">Information Technology</option>
<option value="CS">Customer Support</option>
<option value="Sales">Sales</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
</body>

با این حال ، اجرای این قسمت از کد فقط یک شکل نرم و بدون آرایش عمودی قسمت ها ایجاد می کند. و در اینجا شما باید CSS را اضافه کنید.

قسمت CSS را رمزگذاری کنید

اکنون یک صفحه سبک جداگانه ایجاد کرده و قبل از برچسب body آن را به HTML خود اضافه کنید:

<head> <link rel="stylesheet" href="https://www.makeuseof.com/create-stacked-form-css/StackedForm_CSSPart.css"> </head>

سپس متن HTML ، انواع ورودی و ظرف را انتخاب کرده و با استفاده از CSS قالب بندی کنید. این شامل آزمایش خصوصیات مختلف CSS ، مانند خانواده قلم ، عرض ، پد ، فیلد ، نمایشگر ، حاشیه و غیره و افزودن مقادیر ترجیحی شما خواهد بود. به این ترتیب شما در نهایت با یک شکل منظم متناسب با تنظیمات دقیق خود به دست خواهید آمد. به عنوان مثال.


body {
font-family: Calibri;
}
input[type=text], select {
width: 25%;
padding: 12px 20px;
margin: 8px 10;
display: list-item;
border: 4px double #39A9DB;
border-radius: 8px;
box-sizing: border-box;
}
input[type=submit] {
width: 25%;
background-color: #F8E2E6;
color: #0000FF;
padding: 12px 18px;
margin: 20px 0;
border: none;
border-radius: 6px;
cursor: pointer;
}
div.container {
border-radius: 10px;
background-color: #39A9DB;
padding: 40px;
}

خروجی زیر را بررسی کنید.

فرم سفارش داده شده در CSS

اکنون می توانید یک فرم سفارش داده شده در CSS ایجاد کنید

با استفاده از این مقاله ، نحوه ایجاد فرم سفارش داده شده در CSS را آموختید. با تمرین می توانید فرم های خود را اصلاح کرده و استفاده از وب سایت خود را آسان تر کنید.

نام بازی برنامه نویسی “تمرین” است. مهارت های CSS خود را هر روز با پروژه های نمایشگاهی تقویت کنید تا به یک طراح وب شیک و یک توسعه دهنده وب موثر تبدیل شوید.


css-code-in-10 دقیقه
10 مثال ساده از کدهای CSS که می توانید در 10 دقیقه یاد بگیرید

آیا می خواهید در مورد استفاده از CSS بیشتر بدانید؟ برای شروع این مثالهای اساسی کد CSS را امتحان کنید ، سپس آنها را در صفحات وب خود اعمال کنید.

بعدی را بخوانید


درباره نویسنده

.