网页设计之5种简单的XHTML网页表单分享


技术1:标签三明治

将输入框,选择框和文本框全部包含进 label 元素,并全部设置为块级元素。将单选按钮和多选框显示方式设置为 inline 以便于它们在同一行出现。如果你比较喜欢 label 和单选按钮/多选框出现在不同行,可以选择不把它包含在 label 里面,或者使用硬换行处理。
每种情况都在下面展示了。

当这些看起来比较时髦的时候,W3C 事实上已经含蓄地展示了他们的 label 例子。

主要好处:简单

代码:

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>

运行结果

Contact Form

 

 

 

Choice 1

 

Choice 2

 

Choice 3

 

Choice 1

 

Choice 2

 

Choice 3

 

Choice 1

 

Choice 2

 

Choice 3

 

 

技术2:懒人

许多开发者采用了这种不正统但是快速简单(用换行隔断标记)的方法。虽然能运行,但是对你的 css 能力有害,因为你不需要任何 css 去实现它。

主要好处:快速
代码:

<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>

运行结果

Contact Form

 

 

 

Choice 1

 

Choice 2

 

Choice 3

 

Choice 1

 

Choice 2

 

Choice 3

 


 

—-想了解更多的linux相关异常处理怎么解决关注<猴子技术宅>



本文来自网络收集,不代表猴子技术宅立场,如涉及侵权请点击右边联系管理员删除。

如若转载,请注明出处:https://www.ssfiction.com/htmljc/74033.html

发表评论

邮箱地址不会被公开。 必填项已用*标注