5 Simple XHTML Web Forms for Web Design

Simple XHTML web form in web design 5. Technique 1: Label Sandwich Include the input box, selection box and text box into the label element and set them all as block-level elements. Set the display mode of radio buttons and check boxes to inline so that they appear on the same line. If you prefer the label and radio button/checkbox to appear on different lines, you can choose not to include it in the label, or use hard line break processing.
Each scenario is presented below.

While these seem trendy, the W3C has actually implicitly shown examples of their labels.
Main benefit : Simple code:
label, input, select, textarea {display: block;} label {margin-bottom: 10px;} input[type="radio"], input[type="checkbox"] {display: inline;} <form> <fieldset> <legend>Contact Form</legend> <label for="name"> Name</label> <input id="name" name="name" size="20" /> <label for="email">Email</label> <input id="email" name="email" size="20" /> <label for=" Choices"> Choices (radio) — <em>wrapped label</em></label> <input name=" Choice" type="radio" /> Choice 1 <input name=" Choice" type="radio" /> Choice 2 <input name=" Choice" type="radio" /> Choice 3 <label style="margin-bottom: 0pt;" for=" Choices2"> Choices (checkbox) — <em>non-wrapped label, margin reset</em></label> <input name=" Choice2" type="checkbox" /> Choice 1 <input name=" Choice2" type="checkbox" /> Choice 2 <input name=" Choice2" type="checkbox" /> Choice 3 <div style="height: 10px;"></div> <label for=" Choices3"> Choices (checkbox) — <em>wrapped, hard line-break</em></label> <input name=" Choice3" type="checkbox" /> Choice 1 <input name=" Choice3" type="checkbox" /> Choice 2 <input name=" Choice3" type="checkbox" /> Choice 3 <label for="dropdown"> Question</label> <select id="dropdown"> <optgroup label="Group of Options"></optgroup> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> <label for="message"> Message <textarea cols="36" rows="12" name="message"></textarea> </label> <input type="submit" value="send it" /> </fieldset> </form>
Running results :
#expamle1 label,#expamle1 input,#expamle1 select,#expamle1 textarea {display: block;}
#expamle1 label {margin-bottom: 10px;}
#expamle1 input[type="radio"],#expamle1 input[type="checkbox"] {display: inline;}
Technique 2: Lazy Many developers use this unorthodox but quick and easy approach (using line breaks to separate tags). It works, but it's bad for your CSS skills, since you don't need any CSS to do it.
Main Benefits : Fast Code:
<form> <fieldset> <legend>Contact Form</legend> <label for="name">Name</label> <input id="name" name="name" size="20" /> <label for="email">Email</label> <input id="email" name="email" size="20" /> <label for=" Choices"> Choices (radio)</label> <input name=" Choice" type="radio" /> Choice 1 <input name=" Choice" type="radio" /> Choice 2 <input name=" Choice" type="radio" /> Choice 3 <label for=" Choices3"> Choices (checkbox)</label> <input name=" Choice3" type="checkbox" /> Choice 1 <input name=" Choice3" type="checkbox" /> Choice 2 <input name=" Choice3" type="checkbox" /> Choice 3 <label for="dropdown">Question</label> <select id="dropdown"> <optgroup label="Group of Options"></optgroup> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> <label for="message">Message</label> <textarea cols="36" rows="12" name="message"></textarea> <input type="submit" value="send it" /> </fieldset> </form>
Running results :

Previous Page 1 2 Next Page Read Full Article

<<: Basic usage details of Vue componentization

>>: The implementation principle of Zabbix dynamic execution monitoring collection script