表單結(jié)構(gòu)
表單結(jié)構(gòu)
在做網(wǎng)站中，表單不僅指一個(gè)<form>標(biāo)簽，實(shí)際上它是一個(gè)復(fù)雜的數(shù)據(jù)控件，提供數(shù)據(jù)輸入的接口和數(shù)據(jù)傳輸?shù)囊?guī)則，這有別于網(wǎng)頁中其他標(biāo)簽。表單另一個(gè)特殊之處就是它包含多個(gè)表單域?qū)ο?，只有協(xié)同合作，整個(gè)表單才能夠正常工作，實(shí)現(xiàn)信息交互的目的。
一個(gè)完整的表單必須包含表單框（<form>標(biāo)簽）、表單域（數(shù)據(jù)輸入域）和表單事件（提交按鈕，觸發(fā)表單數(shù)據(jù)被提交的界面）如下圖所示。
如果使用html表示，則代碼如下：
<form id="form1" name="form1" method="post" action=""> <label>姓名：<input type="text" name="textfield" type="horizontal"> <legend>性別：</legend> <label><input name="sex" type="radio" value="男" checked />男</label> <label><input name="sex" type="radio" value="女" />女</label> </fieldset> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>興趣：</legend> <label><input name="interest" type="checkbox" value="體育" />體育</label> <label><input name="interest" type="checkbox" value="音樂" />音樂</label> <label><input name="interest" type="checkbox" value="計(jì)算機(jī)" />計(jì)算機(jī)</label> </fieldset> <label>學(xué)歷： <select name="level" data-inline="true">id="textfield" /> </label> <fieldset data-role="controlgroup" data-<option value="level1">中學(xué)</option> <option value="level2">?？?lt;/option> <option value="level3">本科</option> <option value="level4">研究生</option> </select> </label> <label>簡介：<textarea name="intr" cols="40" rows="4"></textarea></label> <label><input name="" type="submit" value="提交" data-inline="true" data-theme="e" /></label></form>
在上面代碼中，<form>標(biāo)簽構(gòu)成了表單包含框，其他元素都必須包含在其中，而<input>、<select>和<textarea>標(biāo)簽則表示表單域，其中<in-put name="" type="submit" value="提交" />則表示表單事件，單擊該按鈕將觸發(fā)表單提交動作，實(shí)現(xiàn)數(shù)據(jù)請求的交互行為。表單域所包含的對象沒有限制，但是表單框是必需的，表單事件可以附加在表單框上或者其他表單域上。