CSS Forms In Hindi

CSS

CSS Forms In Hindi – Is Tutorial Me Hamne Html Ke Simple Se Form Ko CSS Properties Ki Help Se Kis Tarah Attractive Banaya Ja Skta Hai, Yeh Explain Kiya Hai |

CSS Forms In Hindi

Contents

Ham Jante Hai Ki Html Ki Help Se Ham Sirf Ek Simple Sa Form Bana Skte Hai Jo Ki Bahut Ugly Dikhata Hai, But CSS Ki Help Se Ham Html Form Ko Bahut Attractive Baka Skte hai , CSS Html Form Ke Look Ko Bahut Jyada Improve Kar Deta Hai |

Example :

<!DOCTYPE html>
<html>
<style>
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;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

div {
  border-radius: 5px;
  background-color: skyblue;
  padding: 20px;
}
</style>
<body>

<h3>Master Programing-CSS Form</h3>

<div>
  <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>
</div>

</body>
</html>

Output :

Dekha Kaise CSS Ki Help Se Hamne Bahut Attractive Form Banaya Hai, Is Tarah Aap Isme Bahit Sari Style Aur Bhi De Skte Ho Apne Hisab Se Color, Font Etc De Skte Ho |

Styling Input Fields In CSS Form In Hindi

Html Form Ke Input Field Ko Aap Apni Need Ke Hisab Se Style De Skte Hai, Generally CSS Ki Help Se Input Field Ki Width Hi Set Ki Jati Hai But Aap Input Field Ko Background Color Etc Properties Bhi De Skte Ho |

Example :

<!DOCTYPE html>
<html>
<head>
<style> 
input {
  width: 100%;
}
</style>
</head>
<body>

<p>Master Programing-CSS Form</p>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
</form>

</body>
</html>

Output :

Dekha Hamne Input Field Ki Width Kis Parkar Set Ki Hai , Is Tarah Aap Chahe Jitni Width Apne Hisab Se Set Kar Skte Ho|

Note : Upar Diye Gye Tarike Se Agar Ap Input Ko Style Denge To Vah Style Sabhi Input Filed Par Apply Hogi But Aap Kisi Specific Input Ko Hi Style Dena Chahte Hai To Ap CSS Attribute Selectors Ki Help Se De Skte Hai –

Example :

  • input[type=text] – Only Text Field Ko Select Kane Ke Liye
  • input[type=password] – Only Password Field Ko Select Karne Ke Liye
  • input[type=number] – Only Number Field Ko Select Karne Ke Liye Etc.

Padded Inputs In CSS Form In Hindi

Input Field Ke Andar Space Badane Ke Liye Padding Property Use Kar Skte Hai Jisse Hame Input Field Aur Bhi Good Looking Ho Jata Hai, Agar Html Form Me Bahut Sare Input Field Ho To Hame Margin Property Bhi Deni Hoti Hai Taki Input Fields Ke Bich Me Bhi Kuchh Space Dikhe |

CSS Image Gallery In Hindi

Example :

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 10px 18px;
  margin: 8px 0;
  box-sizing: border-box;
}
</style>
</head>
<body>

<p>Master Programing-CSS Form</p>

<form>
  <label for="fname">First Name :</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last Name :</label>
  <input type="text" id="lname" name="lname">
</form>

</body>
</html>

Output :

Dekha Ki Padding And Margin Dene Ke Bad Input Field Kitni Good Looking Ho Gyi |

Bordered Inputs In CSS Form In Hindi

Ab Tak Hame Input Field Par Jo Border Dikh Rha Tha Vo Input Ka By Default Border Tha, But Ham Apne Hisab Se Input Border Set Kar Skte Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 10px 18px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid blue;
  border-radius: 4px;
}
</style>
</head>
<body>

<p>Master Programing-CSS Form</p>

<form>
  <label for="fname">First Name :</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last Name :</label>
  <input type="text" id="lname" name="lname">
</form>

</body>
</html>

Output :

Is Prakar Ham Apne According Input Border Set Kar Skte Hai |

Colored Inputs In CSS Form In Hindi

Html Form Ke Input Field Ko Ham Apni Need Ke Accordind Color Bhi De Skte Hai Jisse Form Aur Bhi Attractive And Unique Dikhe, Iske Liye Ham Input Field Ko background-color Property And Input Ke Text Ko color Property De Skte Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  background-color: blue;
  color: white;
}
</style>
</head>
<body>

<p>Master Programing-CSS Form</p>

<form>
  <label for="fname">First Name :</label>
  <input type="text" id="fname" name="fname" value="Master">
  <label for="lname">Last Name :</label>
  <input type="text" id="lname" name="lname" value="Programing">
</form>

</body>
</html>

Output :

Input with icon/image In CSS Form In Hindi

Aapne Dekha Hoga Ki Kuchh Input Fields Me Icon/Image Bhi Hote Hai, Jaise Ki Search Input Me Search Ka Icon Laga Rhatah Hai, Input Field Ke According Aap Icon/Images Bhi Add Kar Skte Hai |

Example : background-image : Me Icon/Image Ka Path Set Jarur Kare |

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 80%;
  font-size: 16px;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
}
</style>
</head>
<body>

<p>Master Programing-CSS Form</p>

<form>
  <input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>

Output :

Dekha Input Field Me Seach Icon Bhi Show Ho Rha Hai, Is Prakar Aap Apni Input Field Ke According Icon Use Kar Skte Hai |

Make Money Online
Top Five Computer Course in Hindi

Animated Search Input In CSS Form In Hindi

Agar Hame Seach Input Wala Field Animated Chahiye Matalab Jab Bhi User Search Par Click Kare To Input Field Dikhe To Iske Liye Hame CSS Transition Property Ka Use Kar Skte Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 130px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 80%;
}
</style>
</head>
<body>

<p>Master Programing-CSS Form</p>

<form>
  <input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>

Output :

Jab Ham Search Par Click Karte Hai To Search Inpit Ki Width Screen Ki 80% Ho Jayegi Jo Ki Hamne Set Ki Hai |

Is Parka Aap Input Field Me Animation Bhi Use Kar Skte Ho, Mostly Search Input Ke Liye Hi Animation Use Kiya Jata Hai

Styling Textareas In CSS Form In Hindi

Generally Ham Textarea Ko Resize Kar Skte Hai But Ham Textaraea Ko Resize Karne Se Prevent Kar Skte Hai, Iske Liye Hame resize Property Ko none Set Karna Hoga |

Example :

<!DOCTYPE html>
<html>
<head>
<style> 
textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 16px;
  resize: none;
}
</style>
</head>
<body>

<form>
  <textarea>Some text...</textarea>
</form>

</body>
</html>

Output :

Styling Select Menus In CSS Form In Hindi

Select Menus Ko Me Se Select Ki Hue Option Ko Alg Se Background Color Ya CSS Property Dekar Bhi Ham Form Ko Bahut Attractive Bana Skte Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style> 
select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<p>Master Programing-CSS Form</p>

<form>
  <select id="lang" name="Lang">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  </select>
</form>

</body>
</html>

Output :

Styling Input Buttons In CSS Form

Ab Ham Bat Karte Hai Button Ko Style Dene Ki Jo Ki Form Ka Sabse Important Part Hota Hai, To Chaliye Dekhate Hai Ki Buttons Ko Kis Parkar Style De Skte Hai,

HackerRank – Loops In Hindi

Example :

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=button], input[type=submit], input[type=reset] {
  background-color: blue;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
</style>
</head>
<body>

<p>Master Programing-CSS Form</p>

<input type="button" value="Button">
<input type="reset" value="Reset">
<input type="submit" value="Submit">

</body>
</html>

Output :

Dekha Kis Parkar Hamne Button Ko Kitna Attractive Banaya Hai, Aap Inhe Aur Bhi Style De Skte Hai Apni Need Ke According |

Agar Buttons Ki 100 % Width Chahuiye To width : 100%; Property Set Kar Ke Kar Skte Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=button], input[type=submit], input[type=reset] {
  width:100%;
  background-color: blue;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
</style>
</head>
<body>

<p>Master Programing-CSS Form</p>

<input type="button" value="Button">
<input type="reset" value="Reset">
<input type="submit" value="Submit">

</body>
</html>

Output :

Responsive Form In Hindi

Jab Screen Ko Resize Kiya Jata Hai Ya Form Ko Mobile Me Dekha Jata Hai To Vah Pura Dikh Nhi Pata, Jisse User Experience Ghatata Hai Aur User Website Se Move Kar Jata Hai, Aaisi Problem Na Ho Iske Liye Ham Responsive Form Bnate Hai, Responsive Form Banane Ke Liye Ham CSS Media Queries Ki Use Karenge |

Ham Is Responsive Form Me Is Tutorial Me Discuss Ki Hai Gayi Properties Use Karenge Jisse Apka Rivison Bhi Ho Jayega, To Chaliye Banate Hai Responsive Form

Example :

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: blue;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}
</style>
</head>
<body>

<h2>Master Programing-Responsive Form</h2>

<div class="container">
  <form>
  <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="language">Language</label>
    </div>
    <div class="col-75">
      <select id="language" name="language">
        <option value="c++">C++</option>
        <option value="java">Java</option>
        <option value="python">Python</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="subject">Any Suggestion</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>

</body>
</html>

Output :

Jab Ham Screen Ki Width 600 px Se Kam Karte Hai Tab Hi Form Bahut Attractive Dikhata Hai Jo Ki CSS Media Queries Ki Help Se Kiya Hai, Aap Chahe To Kisi Aur Width Ke Liye Bhi Set Kar Skte Hai |

  • CSS Dropdowns
  • CSS Image Gallery
  • Agar Apko CSS Form Se Related Koi Bhi Doubt Ho To Comment Section Me Puchh Sakte Hai |

    Leave a Reply

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