form html css

<form action="/action.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" value="Mike"><br><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" value="Walker"><br><br> <input type="submit" value="Submit"> </form>

<!DOCTYPE html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="design.css"> </head> <body> <form action ="traitement.php" method ="post/get"> <p> Remplissez ce formulaire:<br> Nom: <input type="text" name="prenom"> </p> <p> Prénom: <input type="text" name="Nom"> </p> <p> Nom de la sociétée: <input type="text" name="Nom de ma sociétée"> <br> </p> <select name="requete"> <option value= "Prendre contacte">Prendre contacte</option> <option value= "embaucher moi">embaucher moi</option> <option value="j'ai besoin d'un stagiaire">j'ai besoin d'un stagiaire<option> </select> <label>Votre message:</label><br> <textarea></textarea> <br> </form> <section> </section> <form> <label for="Quelle est votre CB?"> Quelle est votre CB? </label> <input type="text" list="cartes" name="cartes"> <datalist id="cartes"> <option value= "GOLD">Gold</option> <option value= "Master card">Master card</option> <option value= "Visa classique">Visa classique</option> </datalist> </form> </body>

styling input type text

{
  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: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

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

.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;
}

/* 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:
  <!DOCTYPE html>
  <html>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  </head>
  <body>

  <h2>Responsive Form</h2>
  <p>Resize the browser window to see the effect. When the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other.</p>

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

  </body>
  </html>
*/

Posted by: Guest on June-05-2020

Code answers related to "form html css"

Code answers related to "Html"

Browse Popular Code Answers by Language

Answers for "form html css"

Code answers related to "form html css"

Code answers related to "Html"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us