Five simple XHTML web forms for Web Design

Time:2022-1-17

Simple XHTML web form in Web Design 5.
The input box, selection box and text box are all included in the label element, and all are set as block level elements. Set the radio button and multi box display to inline so that they appear on the same line. If you prefer that label and radio button / multi box appear in different lines, you can choose not to include it in label, or use hard line wrapping.
Each case is shown below.

When these look fashionable, W3C has actually implicitly shown their label examples.
Main benefits: 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>

Operation 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;}
Technology 2: lazy
Many developers have adopted this unorthodox but fast and simple method (with line break marks). Although it can run, it is harmful to your CSS ability because you don’t need any CSS to implement 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>

Operation results

Recommended Today

IOS – OpenGL ES image vignette diffusion GPUImageVignetteFilter

Table of contents 1. Introduction 2. Effect demonstration 3. Source code download 4. Guess you like Zero-based OpenGL (ES) learning route recommendation:OpenGL (ES) Learning Catalog >> OpenGL ES Basics Zero-based OpenGL (ES) learning route recommendation:OpenGL (ES) Learning Catalog >> OpenGL ES transitions Zero-based OpenGL (ES) learning route recommendation:OpenGL (ES) Learning Catalog >> OpenGL ES effects […]