NodOnce : Think · Make · Launch

an ee.startup

what is genes.zone?

contact telegram twitter
genes:one
UI

Forms, Elements

The ugliest of all UI components, and the most work requiring ones to make them look standard.

Forms, form fields, buttons, custom input types, in order to interact with the user properly and effectively we need all of them.
They are not always fun to customize when starting a new project. At least a pleasant start is here.


Nothing speacial to do for a textbox


  <input type="text" class="w20r" placeholder="Name Surname">
  <input type="email" class="w20r" placeholder="Enter your email address...">
  <input type="password" class="w20r" placeholder="Enter your password...">


          

Nothing speacial to do for a Select element either...


  <select class="w20r">
    <option>Select One</option>
    <optgroup label="Lorem Ipsum">
      <option value="test_one">QYPGqypg ÖÇİŞÜĞöçişüğ</option>
      <option value="test_two">#123.456.789,0</option>
    </optgroup>
    <optgroup label="Dolor Sit">
      <option value="test_three">Test Three</option>
      <option value="test_four">Test Four</option>
    </optgroup>
  </select>


          

As you can probably guess, nothing speacial to do for a Checkbox too...
But, just you have to use input + label next pattern.


  <input type="checkbox" value="yes" id="agreement_yes"><label for="agreement_yes">I've read the agreement.</label>
  <input type="checkbox" value="no" id="agreement_no"><label for="agreement_no">I don't care about your agreement.</label>


          

Radios are also used the way HTML is designed.
You just have to stick to the input + label next pattern.


  <input type="radio" value="yes" name="agreement" id="agree_radio_yes"><label for="agree_radio_yes">I've read the agreement.</label>
  <input type="radio" value="no" name="agreement" id="agree_radio_no"><label for="agree_radio_no">No, I don't know how to read.</label>


          

Yes, just plain textarea...


  <textarea class="w40r h16r" name="textarea" placeholder="Please enter every boring detail about the incident..."></textarea>


          

Oh, great, we have buttons too...


  <input type="submit" value="This is a submit type input.">
  <input type="reset" value="This is a reset type input.">
  <button>This is a button input.</button>
  <a href="#" class="button">This is a link button.</a>


          
This is a link button.
×

Contact NodOnce : Say Something!