कैसे करें - स्टैक्ड फॉर्म
CSS के साथ स्टैक्ड फ़ॉर्म बनाने का तरीका जानें।
स्टैक्ड फॉर्म
एक लंबवत स्टैक्ड फॉर्म (जहां इनपुट और लेबल एक दूसरे के बगल में एक दूसरे के ऊपर रखे जाते हैं):
स्टैक्ड फॉर्म कैसे बनाएं
चरण 1) HTML जोड़ें
इनपुट को प्रोसेस करने के लिए <form> एलीमेंट का इस्तेमाल करें। आप इसके बारे में हमारे PHP ट्यूटोरियल में अधिक जान सकते हैं ।
प्रत्येक फ़ील्ड के लिए इनपुट (मिलान लेबल के साथ) जोड़ें:
उदाहरण
<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>
<input type="submit" value="Submit">
</form>
चरण 2) सीएसएस जोड़ें:
उदाहरण
/* Style inputs */
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing:
border-box;
}
/* Style the submit
button */
input[type=submit] {
width: 100%;
background-color: #04AA6D;
color: white;
padding: 14px
20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* Add a background color to the submit button on
mouse-over */
input[type=submit]:hover {
background-color: #45a049;
}
युक्ति: HTML प्रपत्रों के बारे में अधिक जानने के लिए हमारे HTML प्रपत्र ट्यूटोरियल पर जाएँ।
टिप: तत्वों को स्टाइल करने के तरीके के बारे में अधिक जानने के लिए हमारे सीएसएस फॉर्म ट्यूटोरियल पर जाएं।