表單結(jié)構(gòu)

表單結(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ù)被提交的界面)如下圖所示。

bc85a615ff3aab36f935fca152368005.jpg

如果使用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="計算機" />計算機</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ā)表單提交動作,實現(xiàn)數(shù)據(jù)請求的交互行為。表單域所包含的對象沒有限制,但是表單框是必需的,表單事件可以附加在表單框上或者其他表單域上。

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:0871-63535511(點擊可一鍵撥號)