कैसे करें - उत्तरदायी प्रपत्र
CSS के साथ रिस्पॉन्सिव फ़ॉर्म बनाने का तरीका जानें।
उत्तरदायी प्रपत्र
प्रभाव देखने के लिए ब्राउज़र विंडो का आकार बदलें (लेबल और इनपुट छोटी स्क्रीन पर एक दूसरे के बगल में एक दूसरे के ऊपर ढेर हो जाएंगे):
रिस्पॉन्सिव फॉर्म कैसे बनाएं
चरण 1) HTML जोड़ें
इनपुट को प्रोसेस करने के लिए <form> एलीमेंट का इस्तेमाल करें। आप इसके बारे में हमारे PHP ट्यूटोरियल में अधिक जान सकते हैं ।
प्रत्येक फ़ील्ड के लिए इनपुट (मिलान लेबल के साथ) जोड़ें, और प्रत्येक लेबल के चारों ओर एक <div> तत्व लपेटें और CSS के साथ एक निर्दिष्ट चौड़ाई निर्धारित करने के लिए इनपुट करें:
उदाहरण
<div class="container">
<form action="action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input
type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label
for="lname">Last Name</label>
</div>
<div class="col-75">
<input
type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label
for="country">Country</label>
</div>
<div class="col-75">
<select
id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label
for="subject">Subject</label>
</div>
<div class="col-75">
<textarea
id="subject" name="subject" placeholder="Write something.."
style="height:200px"></textarea>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</div>
चरण 2) सीएसएस जोड़ें:
उदाहरण
/* Style inputs, select elements and textareas */
input[type=text], select, textarea{
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}
/* Style the
label to display next to the inputs */
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
/* Style the submit button */
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px
20px;
border: none;
border-radius: 4px;
cursor:
pointer;
float: right;
}
/* Style the container */
.container {
border-radius: 5px;
background-color:
#f2f2f2;
padding: 20px;
}
/* Floating column for labels:
25% width */
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
/* Floating column for inputs: 75% width */
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content:
"";
display: table;
clear: both;
}
/* Responsive layout - when the
screen is less than 600px wide, make the two columns stack on top of each
other instead of next to each other */
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
युक्ति: HTML प्रपत्रों के बारे में अधिक जानने के लिए हमारे HTML प्रपत्र ट्यूटोरियल पर जाएँ।
टिप: तत्वों को स्टाइल करने के तरीके के बारे में अधिक जानने के लिए हमारे सीएसएस फॉर्म ट्यूटोरियल पर जाएं।