form表單一般用來收集用戶的信息,并把信息傳送到后臺。
1.form常用屬性
//格式:
<form name="Form" action="form_action.asp" method="get"></form>
//name: 表單提交時的名稱
//action: 提交到的地址
//method: 規(guī)定用于發(fā)送 form-data 的 HTTP 方法,提交方式:get和post
2.input常用屬性
<input>標(biāo)簽用于搜集用戶信息。根據(jù)不同的 type 屬性值,輸入字段擁有很多種形式。輸入字段可以是文本字段、復(fù)選框、掩碼后的文本控件、單選按鈕、按鈕等等。
<form action="##" method="get">
<fieldset>
<legend>表單</legend>
<label for="name">text:</label>
<input type="text" id="name" name="name" placeholder="請輸入內(nèi)容" maxlength="10" required autofocus="autofocus" autocomplete="on">
<!--placeholder:用于在輸入框中顯示提示信息。輸入文字時消失,不會被提交(ie中存在兼容問題)-->
<!--maxlength:number規(guī)定輸入字段中的字符的最大長度-->
<!--required:必填項-->
<!--autofocus:autofocus規(guī)定輸入字段在頁面加載時是否獲得焦點(diǎn)。(不適用于 type="hidden")-->
<!--autocomplet:自動記憶(on/off)-->
<label for="pwd">pwd:</label>
<input type="password" id="pwd" name="pwd">
<label for="number">number:</label>
<input type="password" id="number" name="number">
<label for="radio">radio:</label>
<input type="radio" id="radio" name="radio" value="男" checked>
<input type="radio" id="radio" name="radio" value="女">
<label for="checkbox">checkbox:</label>
<input type="checkbox" id="checkbox" name="checkbox" value="aa">
<input type="checkbox" id="checkbox" name="checkbox" value="bb" checked>
<input type="checkbox" id="checkbox" name="checkbox" value="cc">
<label for="select">select:</label>
<select name="select" id="select" multiple size="3">
<optgroup label="北京">
<option value="朝陽">朝陽</option>
<option value="大興">大興</option>
<option value="順義">順義</option>
</optgroup>
<optgroup label="山西">
<option value="孝義">孝義</option>
<option value="長治" selected>長治</option>
<option value="太遠(yuǎn)">太遠(yuǎn)</option>
</optgroup>
</select>
<label for="datalista">datalist:</label>
<input type="text" list="datalistb" name="datalist" id="datalista">
<datalist id="datalistb">
<option value="朝陽">朝陽</option>
<option value="大興">大興</option>
<option value="順義">順義</option>
<option value="孝義">孝義</option>
<option value="長治">長治</option>
<option value="太遠(yuǎn)">太遠(yuǎn)</option>
</datalist>
<label for="textarea">textarea:</label>
<textarea name="textarea" id="textarea" cols="30" rows="10">
通過給textarea設(shè)置css屬性resize: none;可以防止用戶縮放
</textarea>
<label for="output">output:</label>
<output id="output" name="output">tianaitian</output>
<label for="hidden">hidden:hidden標(biāo)簽不在頁面中顯示,但是可以獲取它的value</label>
<input type="hidden" id="hidden" name="hidden" value="hidden">
<label for="file">file:</label>
<input type="file" value="file" id="file">
<label for="button">button:</label>
<input type="button" value="button" id="button">
<label for="reset">reset:</label>
<input type="reset" value="reset" id="reset">
<label for="submit">submit:</label>
<input type="submit" value="submit" id="submit" >
<label for="image">image:</label>
<input type="image" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1519840242389&di=68c1bd0dfe4f6d6747f61c3a9f230a41&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F9e3df8dcd100baa1706f8e964c10b912c8fc2e58.jpg" value="image" id="image">
<input type="email">
<input type="tel">
<input type="url">
<input type="search">
<input type="time">
<input type="date">
<input type="datetime-local">
<input type="week">
<input type="month">
<input type="color">
<input type="range">
<meter min="0" max="20" low="20" high="80" value="18"></meter>
</fieldset>
</form>
<!--注意:-->
<!--1.input都要有name屬性,用于向提交到后臺的信息進(jìn)行命名,若無name則后臺會自動忽略該條信息。-->
<!--2.action提交地址,若不填則會直接提交到當(dāng)前頁面-->
<!--3.type屬性類型:text、password、radio、checkbox、submit、reset、button、image、hidden-->