Forms

In this example below you will see how to do a Forms with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by alexaguilar, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright alexaguilar ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Forms</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container-fluid">
 <div class="row">
  <div class="col-md-12">
   <h3>Encuentra los mejores planes</h3>
  </div>
  <div class="col-md-12">
   <label>Ciudad en la que deseas el plan</label>
   <select class="form-control"></select>
  </div>
  <div class="col-xs-6">
   <label>Fecha de Ingreso</label>
   <input class="form-control" type="text" placeholder="Seleccione">
  </div>
  <div class="col-xs-6">
   <label>Fecha de Salida</label>
   <input class="form-control" type="text" placeholder="Seleccione">
  </div>
  
  <div class="col-md-12">
   <label>¿Cuantas habitaciones deseas?</label>
   <select class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
   </select>
  </div>
  <div class="col-md-12">Habitación 1</div>
  <div class="col-xs-4">
   <label>Adultos<small>(+12)</small></label>
   <select class="form-control">
   <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
   </select>
  </div>
  <div class="col-xs-4">
   <label>Niños<small>(2-11)</small></label>
   <select class="form-control">
   <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
   </select>
  </div>
  <div class="col-xs-4">
   <label>Bebes<small>(0-2)</small></label>
   <select class="form-control">
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
   </select>
  </div>
  <div class="col-xs-12">
   <button type="button" class="btn pull-right">Buscar</button>
  </div>
 </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/alexaguilar/forms-adOaXY */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300,100,300italic,400italic,700italic,100italic&subset=latin,latin-ext);

body {
 font-family: 'Roboto', sans-serif;
}

Comments