標籤：html 表單
本文介紹html中表單的基本用法。
代碼整理自w3school：http://www.w3school.com.cn
<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="zh-cn" /><!--普通表單，選項按鈕，複選按鈕--><h3>普通表單</h3><body><form> 帳號<input type="text" name="username" size="16"><br/><br/> 密碼<input type="password" name="password" size="16"><br/></form><h3>選項按鈕表單</h3><form> <input type="radio" name="sex" value="male"/>男<br/> <input type="radio" name="sex" value="female"/>女</form><h3>複選按鈕表單</h3><form> <input type="checkbox" name="bike"/>I have a bike<br/> <input type="checkbox" name="car"/>I have a car</form><!--一個按鈕--><form> <input type="button" value="Login"></form><!--表單的動作屬性（Action）和確認按鈕--><form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user"/><input type="submit" value="Submit" /></form><!--下拉式清單--><h3>下拉式清單</h3><form> 選擇城市： <select name="city"> <option value="tianjin">天津</option> <option value="beijing">北京</option> <option value="shanghai" selected="selected">上海</option> <option value="chongqing">重慶</option> <option value="guangzhou">廣州</option> </select></form><!--帶分組的下拉式清單--><h3>帶分組的下拉式清單</h3><form> 選擇城市： <select> <optgroup label="東北"> <option value="haerbin">哈爾濱</option> <option value="shenyang">瀋陽</option> </optgroup> <optgroup label="華北"> <option value="beijing">北京</option> <option value="tianjin">天津</option> <option value="jinan">濟南</option> </optgroup></select></form><!--指定大小的輸入框--><textarea rows="5" cols="30">The cat was playing in the garden.</textarea><br/><br/><br/><!--在資料周圍繪製一個帶標題的框--><form> <fieldset> <legend>健康資訊</legend> 身高：<input type="text" /> 體重：<input type="text" /> </fieldset></form><p>如果表單周圍沒有邊框，說明您的瀏覽器太老了。</p><br/><!--使用按鈕監聽表單的行為--><h3>點擊按鈕時擷取輸入框的內容</h3><form action="input_form_action.asp" method="get"> <p>First name: <input type="text" name="fname" /></p> <p>Last name: <input type="text" name="lname" /></p> <input type="submit" value="Submit" /></form><p>請單擊確認按鈕，輸入會發送到伺服器上名為 "form_action.asp" 的頁面。</p><h3>點擊按鈕時擷取複選框的內容</h3><form name="input" action="checkbox_form_action.asp" method="get"> <p>I have a bike:<input type="checkbox" name="vehicle" value="Bike" checked="checked" /></p> <p>I have a car: <input type="checkbox" name="vehicle" value="Car" /></p> <p>I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" /></p> <input type="submit" value="Submit" /></form> <p>如果您點擊 "Submit" 按鈕，您將把輸入傳送到名為 checkbox_form_action.asp 的新頁面。</p><h3>點擊按鈕時擷取單選框的內容</h3><form name="input" action="radio_form_action.asp" method="get"> Male: <input type="radio" name="Sex" value="Male" checked="checked"> <br /> Female: <input type="radio" name="Sex" value="Female"> <br /><br /> <input type ="submit" value ="Submit"></form> <p>如果您點擊 "Submit" 按鈕，您將把輸入傳送到名為 radio_form_action.asp 的新頁面。</p><h3>這個表單會把電子郵件發送到 W3School。</h3><form action="MAILTO:[email protected]" method="post" enctype="text/plain"> 姓名：<br /> <input type="text" name="name" value="Tom Smith" size="20"> <br /> 電郵：<br /> <input type="text" name="mail" value="[email protected]" size="20"> <br /> 內容：<br /> <input type="text" name="comment" value="Thanks!" size="40"> <br /><br /> <input type="submit" value="發送"> <input type="reset" value="重設"></form><br/><br/></body></html>～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
預覽圖：
HTML：表單
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
