生活随笔
收集整理的這篇文章主要介紹了
HTML表单总结
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
一 HTML 表單標(biāo)簽
標(biāo)簽 描述 ? <form> 定義供用戶輸入的表單 ? <input> 定義輸入域 ? <textarea> 定義文本域 (一個多行的輸入控件)
<label> 定義了 <input> 元素的標(biāo)簽,一般為輸入標(biāo)題 ? <fieldset> 定義了一組相關(guān)的表單元素,并使用外框包含起來 ? <legend> 定義了 <fieldset> 元素的標(biāo)題
<select> 定義了下拉選項列表 ? <optgroup> 定義選項組 ? <option> 定義下拉列表中的選項 ? <button> 定義一個點擊按鈕 ? <datalist>??? --html5 指定一個預(yù)先定義的輸入控件選項列表
<keygen>New??? --html5 定義了表單的密鑰對生成器字段 ? <output>New??? --html5 定義一個計算結(jié)果
二 簡單例子 1 創(chuàng)建文本域
<body>
<form action="">First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname"></form>
</body>
?
2 創(chuàng)建密碼字段
<body>
<form action="">Username: <input type="text" name="user"><br>Password: <input type="password" name="password"></form>
</body>
三 表單
在大多數(shù)瀏覽器中,文本域的缺省寬度是20個字符。
單選按鈕(Radio Buttons) <input type="radio"> 標(biāo)簽定義了表單單選框選項
<form><input type="radio" name="sex" value="male">Male<br><input type="radio" name="sex" value="female">Female
</form>
復(fù)選框(Checkboxes) <input type="checkbox"> 定義了復(fù)選框.
<form><input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car
</form>
?
提交按鈕(Submit Button) <input type="submit"> 定義了提交按鈕. 當(dāng)用戶單擊確認(rèn)按鈕時,表單的內(nèi)容會被傳送到另一個文件。表單的動作屬性定
義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數(shù)據(jù)
進行相關(guān)的處理。
<form name="input" action="html_form_action.php" method="get">Username: <input type="text" name="user"><input type="submit" value="Submit"></form>
?
假如您在上面的文本框內(nèi)鍵入幾個字母,然后點擊確認(rèn)按鈕,那么輸入數(shù)據(jù)會傳
送到 "html_form_action.php" 的頁面。該頁面將顯示出輸入的結(jié)果。
?
四 實例 1 帶邊框的表單
<form action=""><fieldset><legend>Personal information:</legend>Name: <input type="text" size="30"><br>E-mail: <input type="text" size="30"><br>Date of birth: <input type="text" size="10"></fieldset></form>
2 帶有輸入框和確認(rèn)按鈕的表單
<form action="demo-form.php">First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br><input type="submit" value="Submit"></form>
3 帶有復(fù)選框的表單
<form action="demo-form.php" method="get"><input type="checkbox" name="vehicle" value="Bike"> I have a bike<br><input type="checkbox" name="vehicle" value="Car" checked="checked"> I have a car<br><input type="submit" value="Submit"></form>
4 帶有單選按鈕的表單
<form action="demo-form.php" method="get"><input type="radio" name="sex" value="Male"> Male<br><input type="radio" name="sex" value="Female" checked="checked"> Female<br><input type="submit" value="Submit"></form>
?
5 從表單發(fā)送電子郵件
<body><h3>Send e-mail to someone@example.com:</h3> <form action="MAILTO:someone@example.com" method="post"enctype="text/plain">Name:<br><input type="text" name="name" value="your name"><br>E-mail:<br><input type="text" name="mail" value="your email"><br>Comment:<br><input type="text" name="comment" value="your comment" size="50"><br><br><input type="submit" value="Send"><input type="reset" value="Reset"></form></body>
?
6 簡單下拉列表
<form action=""><select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option></select></form>
?
7 文本域
<!DOCTYPE html><html><body>
<textarea rows="10" cols="30">
我是一個文本框。
</textarea>
</body>
/html>
?
8 預(yù)選下拉列表
<form action=""><select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat" selected>Fiat</option><option value="audi">Audi</option></select></form>
?
9 創(chuàng)建按鈕
<form action=""><input type="button" value="Hello world!"></form>
?
??? 代碼都直接可用,拿去花吧;
總結(jié)
以上是生活随笔 為你收集整理的HTML表单总结 的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網(wǎng)站內(nèi)容還不錯,歡迎將生活随笔 推薦給好友。