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;"><!-- just to split the demo up --></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
Recommend
The difference between docker run and start
The difference between run and start in docker Do...
Detailed explanation of the characteristics, differences and conversion of px, em, rem and pt in CSS
Concept introduction : 1. px (pixel): It is a vir...
Solve the problem of docker's tls (ssl) certificate expiration
Problem phenomenon: [root@localhost ~]# docker im...
jQuery custom magnifying glass effect
This article example shares the specific code of ...
The difference and usage between div and span
Table of contents 1. Differences and characterist...
WeChat applet canvas implements signature function
In the WeChat applet project, the development mod...
Recommended tips for web front-end engineers
Let's first talk about the value of web front...
6 inheritance methods of JS advanced ES6
Table of contents 1. Prototype chain inheritance ...
Example code for implementing page floating box based on JS
When the scroll bar is pulled down, the floating ...
Detailed explanation of redo log and undo log in MySQL
The most important logs in the MySQL log system a...
How to monitor Linux server status
We deal with Linux servers every day, especially ...
Vue implements a complete process record of a single file component
Table of contents Preface Single file components ...
VUE+Canvas realizes the whole process of a simple Gobang game
Preface In terms of layout, Gobang is much simple...
Django uses pillow to simply set up verification code function (python)
1. Import the module and define a validation stat...
How to shrink the log file in MYSQL SERVER
The transaction log records the operations on the...