表單結(jié)構

  • 2020-08-04 15:26:40
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://51zuanshi.com.cn

表單結(jié)構

做網(wǎng)站中,表單不僅指一個<form>標簽,實際上它是一個復雜的數(shù)據(jù)控件,提供數(shù)據(jù)輸入的接口和數(shù)據(jù)傳輸?shù)囊?guī)則,這有別于網(wǎng)頁中其他標簽。表單另一個特殊之處就是它包含多個表單域?qū)ο?,只有協(xié)同合作,整個表單才能夠正常工作,實現(xiàn)信息交互的目的。

一個完整的表單必須包含表單框(<form>標簽)、表單域(數(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>學歷:        <select name="level" data-inline="true">id="textfield" /> </label>    <fieldset data-role="controlgroup" data-<option value="level1">中學</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>標簽構成了表單包含框,其他元素都必須包含在其中,而<input>、<select>和<textarea>標簽則表示表單域,其中<in-put name="" type="submit" value="提交" />則表示表單事件,單擊該按鈕將觸發(fā)表單提交動作,實現(xiàn)數(shù)據(jù)請求的交互行為。表單域所包含的對象沒有限制,但是表單框是必需的,表單事件可以附加在表單框上或者其他表單域上。

當前文章標題:表單結(jié)構

當前URL:http://51zuanshi.com.cn/news/wzzz/3253.html

上一篇:注釋規(guī)范

下一篇:設計表單頁

網(wǎng)站建設、抖音推廣、頭條推廣、微信朋友圈推廣、快手推廣專線:15368242187(微信同號)