form表單提交 · html

``` <form > ``` 是容器級別的標簽，內部存放可輸入的控件,如果輸入的表單需要提交到數據，所有的控件需要被form表單包裹 method: 方法的意思，指的數據提交的方法，屬性值是post和get action: 是數據提交的位置 2. input 標簽 input 標簽的輸入框是一種，但是不僅僅只有輸入框，通過type屬性，可以拓展多功能 input 的type 屬性非常豐富 2.1輸入框 ``` <input type="text"> ``` 二個重要屬性 value ``` <input type="text" value"張三"> ``` value: 設置默認顯示的內容，屬性值為自定義內容 placeholder : 屬性作用是如果沒有value 的時候提示用戶的文字占位符 ``` <input type="text" placeholder="請輸入用戶名稱"> ``` 2.2密碼框通過type值為password 設置的顯示效果是輸入后通過掩碼形式顯示的 ``` <input type="password" placeholder="請輸入密碼"> ``` 2.3單選框（互斥單選框只能選一個） ``` <input type="radio" name='sex'>男 <input type="radio" name='sex'>女 <input type="radio" name='sex'>保密 ``` 2.4復選框（支持多選，復選框可以通過對自身進行多次點擊實現選擇或者取消）多選框可以選擇一格或者多個,建議同一組設置同樣的 name 屬性也叫多選框，通過type值為checkbox設置 ``` <p>愛好 <input type="checkbox" name='hobby'>運動 <input type="checkbox" name='hobby'>繪畫 <input type="checkbox" name='hobby'>閱讀 <input type="checkbox" name='hobby'>閱其他 </p> ``` 單選框和多選框都有一個默認被選擇的功能，需要給input標簽添加一個 checked="checked" # 2.5文本域 ``` 標簽是<textarea > ``` input 只能輸入單行文本，如果需要使用多行文本，就使用textarea標簽 <p> 自我介紹：(可拖動的一個輸入框） ``` <textarea rows="4s" cols="50" placeholder="請輸入自我介紹" > ``` 自我介紹：(不拖動的一個輸入框） ``` <textarea rows="4s" cols="50" placeholder="請輸入自我介紹" style="resize:none" > ``` 2.6下拉菜單需要一組標簽進行制作 select 選擇的意思，標簽搭建下拉項 option ：選項的意思，表示搭建下拉項 ``` <p> <textarea rows="4s" cols="50" placeholder="請輸入自我介紹" style="resize:none" > </p> <p> 籍貫： <select> <option> 北京</option> <option> 上海 </option> <option> 廣州</option> <option> 深圳</option> </select> </P> ``` ``` selected="selected" //默認選中項 ``` 現在默認的第一個是顯示的，并不是被選中的，如果希望有默認被選中項使用 selected屬性，值 selected 代碼如下： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文檔標題</title> </head> <body> <form> <P> <input type="text"> <br/> <input type="text" value="張三"> <br/>  <input type="text" placeholder="請輸入用戶名稱"> <br/>  <input type="password" placeholder="請輸入密碼"> <br/>  <p> <input type="radio" name='sex'>男  <input type="radio" name='sex'>女  <input type="radio" name='sex'>保密  </p> <P> <h2>愛好</h2> <input type="checkbox" name='hobby'>運動  <input type="checkbox" name='hobby'>繪畫 <input type="checkbox" name='hobby'>閱讀 <input type="checkbox" name='hobby'>閱其他 </p> <p> <textarea rows="4s" cols="50" placeholder="請輸入自我介紹" > </textarea>  <br/> <textarea rows="4s" cols="50" placeholder="請輸入自我介紹" style="resize:none" > </textarea>  <p> <select > <option > 北京</option>  <option > 北京</option>  <option> 上海 </option>  <option> 廣州</option>  <option selected="selected"> 深圳</option>  </select> </p> </p> </p> </P> </form> </body> </html> ``` ## 輸出效果： ![](https://img.kancloud.cn/6a/d5/6ad59cdb01c19b9e836b9e2d9f4bc8b0_791x732.png)