表單結(jié)構(gòu)
在做網(wǎng)站中,表單不僅指一個<form>標(biāo)簽,實際上它是一個復(fù)雜的數(shù)據(jù)控件,提供數(shù)據(jù)輸入的接口和數(shù)據(jù)傳輸?shù)囊?guī)則,這有別于網(wǎng)頁中其他標(biāo)簽。表單另一個特殊之處就是它包含多個表單域?qū)ο?,只有協(xié)同合作,整個表單才能夠正常工作,實現(xiàn)信息交互的目的。
一個完整的表單必須包含表單框(<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ī)</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">專科</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ā)表單提交動作,實現(xiàn)數(shù)據(jù)請求的交互行為。表單域所包含的對象沒有限制,但是表單框是必需的,表單事件可以附加在表單框上或者其他表單域上。