Html 教程 (8)表单
生活随笔
收集整理的這篇文章主要介紹了
Html 教程 (8)表单
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. 定義
表單可用于向服務器傳輸數據。
- 標簽用于為用戶輸入創建 HTML 表單。
- 表單能夠包含 input 元素,比如文本字段、復選框、單選框、提交按鈕等等。
- 表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。
eg.
<form action="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>2. Form 事件
由 HTML 表單內的動作觸發的事件(應用到幾乎所有 HTML 元素,但最常用在 form 元素中):
| onblur | script | 元素失去焦點時運行的腳本。 |
| onchange | script | 在元素值被改變時運行的腳本。 |
| oncontextmenu | script | 當上下文菜單被觸發時運行的腳本。 |
| onfocus | script | 當元素獲得焦點時運行的腳本。 |
| onformchange | script | 在表單改變時運行的腳本。 |
| onforminput | script | 當表單獲得用戶輸入時運行的腳本。 |
| oninput | script | 當元素獲得用戶輸入時運行的腳本。 |
| oninvalid | script | 當元素無效時運行的腳本。 |
| onreset | script | 當表單中的重置按鈕被點擊時觸發。HTML5 中不支持。 |
| onselect | script | 在元素中文本被選中后觸發。 |
| onsubmit | script | 在提交表單時觸發。 |
3. HTML5 中的新屬性
| accept | MIME_type | HTML 5 中不支持。 |
| accept-charset | charset_list | 規定服務器可處理的表單數據字符集。 |
| action | URL | 規定當提交表單時向何處發送表單數據。 |
| autocomplete | onoff | 規定是否啟用表單的自動完成功能。 |
| enctype | 見附注 | 規定在發送表單數據之前如何對其進行編碼。 |
| method | getpost | 規定用于發送 form-data 的 HTTP 方法。 |
| name | form_name | 規定表單的名稱。 |
| novalidate | novalidate | 如果使用該屬性,則提交表單時不進行驗證。 |
| rel | external help license next nofollow noopener noreferrer opener prev search | 規定鏈接資源和當前文檔之間的關系。 |
| target | _blank _self _parent _top framename | 規定在何處打開 action URL |
附注:
enctype 屬性可能的值為
4. eg.
<form action="demo_keygen.php" method="get">用戶名: <input type="text" name="usr_name">加密: <keygen name="security"><input type="submit"> </form>eg. 發送郵件消息
<body> <form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain"> <h3>這個表單會把電子郵件發送到 W3School。</h3> 姓名:<br /> <input type="text" name="name" value="yourname" size="20"> <br /> 電郵:<br /> <input type="text" name="mail" value="yourmail" size="20"> <br /> 內容:<br /> <input type="text" name="comment" value="yourcomment" size="40"> <br /><br /> <input type="submit" value="發送"> <input type="reset" value="重置"> </form> </body>eg. 簡單的下拉列表
<form> <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>總結
以上是生活随笔為你收集整理的Html 教程 (8)表单的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 区块链BaaS云服务(19)趣链Hype
- 下一篇: 区块链BaaS云服务(19)趣链“联邦计