Simple Form

by ronnjoe

HTML

<div class="dockNotify">
  <form >
    
    <label for="region">Region</label>
    <span class="splitter">:</span>
    <select id="region" name="region">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>
    
    <label for="node">Node</label>
    <span class="splitter">:</span>
    <select id="node" name="node">
      <option value="india">India</option>
      <option value="japan">Japan</option>
      <option value="uk">UK</option>
    </select>
  
    
    <label for="subject">Subject</label>
    <span class="splitter">:</span>
    <input type="text" id="subject" name="subject" placeholder="Max 50 charecters">

    <label for="activateTime">Activation Time</label>
    <span class="splitter">:</span>
    <input type="datetime-local" name="activateTime" id="activateTime">
    
    <label for="notifyGroup">Notification Group</label>
    <span class="splitter">:</span>
    <select id="notifyGroup" name="notifyGroup">
      <option value="chennai">Chennai</option>
      <option value="hyd">Hyderabad</option>
      <option value="bang">Bangalore</option>
    </select>

   
    <label for="additionalNotify">Additional Notifier</label>
    <span class="splitter">:</span>
    <input type="text" id="additionalNotify" name="additionalNotify">
 
 <label for="message">Message</label>
<textarea id="message" name="message" placeholder="Max 1000 charecters"> </textarea>
    <input type="submit" value="Submit">
 
 

  </form>
</div>

CSS

.dockNotify input, .dockNotify select,.dockNotify textarea {
    width:58%;
    padding: 5px 10px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
.dockNotify textarea{
  width:100%;
  resize: none;
  height:100px;
}
.dockNotify label {
  font-weight:bold;
  width:35%;
  display:inline-block;
  text-align:left;
}
.dockNotify .splitter{
  display:inline-block;
  width:5%;
}
.dockNotify input[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.dockNotify {
    border-radius: 5px;
    background-color: #f2f2f2;
}