Documentation

Genes?
UI Framework
API Framework
A. CSS & Comps

3. Form and Inputs

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 special to do for a textbox

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

Nothing special 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 special 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" class="w1o2">I've read the agreement.</label>
    <input type="checkbox" value="no" id="agreement_no"><label for="agreement_no" class="w1o2">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" class="w1o2">I've read the agreement.</label>
    <input type="radio" value="no" name="agreement" id="agree_radio_no"><label for="agree_radio_no" class="w1o2">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" class="w1o3" value="This is a submit type input.">
    <input type="reset" class="w1o3" value="This is a reset type input.">
    <button class="w1o3">This is a button input.</button>
    <a href="#" class="button">This is a link button.</a>

            
This is a link button.

You want more?

Unminified and unmerged code base? Seeing backlog, having a say in the future of Genes?
Buying & selling custom Genes mods & clones at the store? Being a part of the community?

Good old-fashioned downloads. Nightly updates. Detailed Q&A, in-depth usage tips & tricks. You are a designer, a custom theme-builder? You'll see that this is the easiest you create themes. Both admin and frontend is customized. So now, your themes can easily have custom admin panels too. And by custom I mean "CUSTOM"! Without being tortured you can create a comp, mod or clone or theme and sell that. Be a part of this community, to learn what the hell a comp, mod or clone is?! Many freebies, custom barebone / skeleton templates. Discounts. Easy recipes. Third party integrations. Saving time. Making money. Interacting. Contributing. Benefiting. Me. Just become a member. Really, I love you.

Authentication
User Management
Quick Login
Performance
Optimised DB
Modular
Upload & Use
Content Management
Blog / CMS
Landing Page
i18n
SEO Optimised
Tag, Filter, Search
Lightweight
Genes Premium Bundle

"Early Adopters Phase"
- 50% Discount -

Quota Left: 248 of 250

€199.90

€99.90

All Inclusive! No Hidden Costs!
Paid Once! No Subscription!
  • What you're getting!?
    • A .zip file bundle of everything.
    • FTP Uploads! Real Indie Maker Life!
      Control Over Your Data and Code!
      And...
    • 4 Sample HTML Templates with Sub-Pages
      • Admin
      • Blog
      • Corporate
      • Landing
    • 4 Sample UI Color Themes
      • Academic
      • Corporate
      • Darko
      • Hip
    • 4 Sample Production Ready Clones:
      Just upload and start using.
      • Multilingual Dynamic No-DB Landing Page
      • A Multi-User Blog
      • An API Backend
      • Almost-Ready Index Something SaaS
        with Stripe Payments and Google Login
    • 6 Useful Mods:
      Pick all you need.
      • Self-Hosted SMTP Mailer Integration
      • Self-Hosted Form / Data Management
      • Self-Hosted GDPR-Ready Analytics!
      • Brevo Transactional Mail Integration
      • Firebase Google Login Integration
      • Stripe Payment Integration
    • Membership to Genes X Community & X Chat Group.
    • Access to the Genes Private Repository on Github.
    • Add Your SaaS / Blog / Website / Landing Page to the Showcase.
    • Work in progress:
      • More templates!
      • More themes!
      • More mods!
      • More sample clones!
      • Training a ChatGPT Agent, GenesGPT, soon...
      • Having a say in the backlog, soon...
      • Updates and more to come, soon...
      • Possibility to sell clones, mods and themes you created, in the Store, soon...