代码改变世界

一份form源码实例

2012-01-25 18:23  youxin  阅读(279)  评论(0编辑  收藏  举报
<form>
<fieldset>
<legend>Contact</legend>
<label for='fullname'>Name </label>
<input id="fullname" name="fullname" /type="text"/>

</fieldset>

<fieldset>
<legend>what is your gender? </legend>
<input type="radio" id="genderf" name="gender" value="f" checked="checked"/>
<label for="genderf">Female</label>
<input type="radio" id="genderm" name="gender" value="m"/>
<label for="genderm">Male</label>
<!--<input type="radio" name="try" value="try" />
<label for="try">try it</label>
-->
</fieldset>
<fieldset>
<legend>where do you live?</legend>
<input type="checkbox" id="arearural" name="areatypes[]" value="rural"/>
<label for="arearural">Rural </label>
<input type="checkbox" id="areasuburb" name="areatype[]" value="suburb"/>
<label for="areasuburb">Suburb</label>
<input type="checkbox" id="areacity" name="areatypes[]" value="city"/>
<label for="areacity">City </label>
</fieldset>
<fieldset>
<label for="address">Address</label><br/>
<textarea id="address" name="address" rows="3" cols="30"></textarea>
</fieldset>
<fieldset>
<label for="level">Level</label>
<select id="level" name="level">
<option value="">-select a level-</option>
<option value="gold">Gold</option>
<option value="silver">Silver</option>
<option value="bronze">Bronze</option>
</select>
</fieldset>
<fieldset>
To enable multiple selections, you add the multiple attribute and add square brackets to the end of

the name attribute as shown in the following code. The multiple attribute enables the user to select
multiple options with his operating system’s shortcut using the Shift, Control, or Command keys.
The square brackets on the name attribute create an array to hold the multiple selections. The size
attribute determines how many options should be displayed at a time.


<label for=”interests”>What do you like?</label>
<select id=”interests” name=”interests[]” multiple=”multiple” size=”3”>
<option value=”0”>Reading</option>
<option value=”1”>Whitewater boating</option>
<option value=”2”>Music</option>
</select>
</fieldset>
<fieldset>
<input name="contactForm" type="submit" value="提交"/>
<input type="reset" value="重置" /> type类型,submit,reset,button的value值是显示的值,与其他标签的value属性不同

You can also send hidden values. “Hidden” just means the form fi eld is not displayed in the form. It
is still displayed in the URL. Use the <input> tag with type=”hidden” to specify hidden values:
<input type=”hidden” name=”id” value=”12345” />

<input type=”hidden” name=”id” value=”12345” />    </fieldset>


</form>