flag
X logo
Menu
Home Icons Contact
Docs
Typography
Responsive
Containers Grid Align Display
Navigation
Topnav Sidenav Slide down nav Verticale nav Fullscreen nav Buttons Pagination
Pictures
Images Animation Parallax Sliteshow Thumbnail
Helpers
Helpers Padding Margin
More
Accordion Borders Cards Colors Form List Popup modal Table Tooltips

Form


Introduction

The HTML form element defines a form that is used to collect user input.
Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.
The form elements are neatly styled in the CSS Framework.

You do not have to enter classes for the form.

You do need classes for the radio box and the check box.

And for <input type = "submit"> use the button class.


Click on the Class name to copy it.

check-con Class for the form check_box label
checkmark Class for the form check_box
radio-con Class for the form radio_box label
radiomark Class for the form radio_box

Example Form


Form

The red_rimmed fields are mandatory!

Example code:

<div class="container">
  <h1>Form</h1>
  <p>The red_rimmed fields are mandatory!</p>
  <form action="form.php" name="myForm" method="post">
    <div class="row">
      <div class="cell">
        <label for="name">Name</label>
        <input name="name" type="text" id="name" required />
      </div>
      <div class="cell">
        <label for="email">Email</label>
        <input name="email" type="email" id="email" required />
      </div>
      <div class="cell">
        <label for="phone">Phone</label>
        <input name="phone" type="text" id="phone" />
      </div>
    </div>
    <div class="row">
      <div class="cell">
        <label class="check-con">Newsletter
        <input type="checkbox" name="newsletter" value="Newsletter" id="Newsletter">
          <span class="checkmark"></span>
        </label>
        <label class="check-con">Update
        <input type="checkbox" name="update" value="update" id="update" checked="checked">
          <span class="checkmark"></span>
        </label>
      </div>
      <div class="cell">
        <label class="radio-con">I'm member
        <input type="radio" name="member" value="memberYes" id="memberYes" checked="checked">
          <span class="radiomark"></span>
        </label>
        <label class="radio-con">I am not a member
        <input type="radio" name="member" value="memberNo" id="memberNo">
          <span class="radiomark"></span>
        </label>
      </div>
      <div class="cell">
        <label>Subject</label>
        <select name="Subject">
          <option value="Question">Question</option>
          <option value="Comment">Comment</option>
          <option value="Website">Website</option>
        </select>
      </div>
    </div>      
    <label for="Message">Message</label>
    <textarea name="Message" id="Message" required></textarea>
    <div class="center"><input type="submit" value="Send" class="button" /></div>
  </form>		
</div>

© Copyright by Web Henkie
All right reserved
Webmaster