HTML form

時間 2019-11-09

標籤 html form 欄目 HTML 简体版

原文原文鏈接

表單（人和電腦互相交流的通道）html

表單在網頁中主要負責數據採集功能服務器

表單標籤：這裏麪包含了處理表單數據所用的CGI程序和URL以及數據提交到服務
器的方法。
表單域：包含了文本框密碼框隱藏域多行文本框複選框單選框
下拉選擇框和文件上傳框等
表單按鈕：包括提交按鈕復位按鈕和通常按鈕；用於將數據傳送到服務器上的
CGI腳本或者取消輸入，還能夠用表單按鈕來控制其餘定義了處理腳本的處理工做。post

做用：1.用於蒐集不一樣類型的用戶輸入
網站

構成：表單標籤
單行文本輸入框密碼輸入框
<input>標籤描述單標籤
name屬性：指定輸入框的名字，自行定義，用英文字母定義便可
type屬性：單行文本輸入框的type固定爲text.
value 爲文本框中默認的字
登陸名：<input name="username" type="text"/ value="輸入名字">

密碼：<input name="username"(名稱自行定義） type="password"（固定爲
password)/>
多行文本輸入框

單選框
至少須要兩個以上的input標籤而且name屬性相同
type=radio
value 值（用戶提交出去的是value裏面的值而不是在頁面上寫的文字）
興趣的選擇：籃球<input name="d1" type="radio" value="0" checked>
足球<input name="d1" type="radio" value="1">
網球<input name="d1" type="radio" value="2">
name同樣值不一樣！value值不一樣
checked 增長一個默認值打勾選項
複選框
name屬性：制定複選框的名字，自行定義，用英文字母定義便可
type屬性：單選框的type固定爲checkbox
value屬性：制定該選項的值
checked屬性:該屬性固定值爲checked,表示選中該選項
選擇城市：北京<input name="c1" type="checkbox" value="010">
北京<input name="c2" type="checkbox" value="021" checked>
下拉單選框
一次能選擇一個選項。用<select>標籤描述，每個選項用子標籤<option>描述。
<select name="select" id="select">
<option value="010">北京</option>
<option value="021" selected="selected">上海</option>
</select>
name屬性：指定下拉單選框名字，自行定義用英文字母定義便可
option標籤的type屬性：
value屬性：制定該選項的值
selected屬性：該屬性固定值爲selected ,表示選中該選項orm

多行文本輸入框(作留言）
多行文本輸入框用於輸入大量的文字信息。用<textarea>標籤描述是雙標籤
我的簡介:<textarea name="jianjie" rows="20" cols="80">默認的字</textarea>
name屬性：制定輸入框的名字自行定義用英文字母定義便可
rows屬性：指定文本框的行數
cols屬性：制定文本框的列數htm

文件上傳
文件上傳標籤
<input type="file"/>用於文件上傳ci

提交按鈕
提交按鈕用於將表單數據提交給action屬性指定的地址進行處理。它用<input>標籤描述，
是單標籤。例如：
<input name="submit" type="submit" value="註冊">
name屬性：指定按鈕的名字，自行定義，用英文字母定義便可
type屬性：提交按鈕此屬性的值固定爲submit
value屬性：指定按鈕上顯示的文字get

提交按鈕重置按鈕普通按鈕
隱藏域文件上傳框下拉多選框 input

表單域（表單域是嵌入在標籤裏的）
重置按鈕
重置按鈕用於清空表單已經天蠍的數據。它用<input>標籤描述是單標籤。例：
<input name="reset" type="reset" value="重填">
name屬性：指定按鈕的名字，自行定義，用英文字母定義便可。
type屬性: 重置按鈕此屬性的值固定爲reset
value屬性：指定按鈕顯示的文字文件上傳

表單區域代碼
表單標籤用於定義表單名字提交數據的目的地及提交方式等信息
<form>標籤用於描述表單，它是雙標籤
元素放在這個區域裏，一個頁面能夠有多個區域。
<form name="form1" action="register.aspx" method="post">(通常用post打包提交 get提
交是地址欄提交有限制通常查詢時使用）

...
</form>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表單實例效果圖</title>
</head>
<body>
<form name="f1" action="f1.asp" method="post">
    <table >
        <tr>
            <td>註冊帳號</td>
        </tr>
     <tr>
         <td>&nbsp;&nbsp;&nbsp;&nbsp;暱稱<input name="nicheng" type="text" >&nbsp;請輸入暱稱</td>
     </tr>
        <tr>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;密碼<input name="paword" type="password"></td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;確認密碼<input name="pawordc" type="password"></td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;<input name="sex" type="radio" value="0" checked>男
                                     &nbsp;<input name="sex" type="radio" value="1">女
            </td>
        </tr>
        <tr>
          <td>&nbsp;&nbsp;&nbsp;&nbsp;生日
              <select name="li" >
                  <option value="0" selected="selected">陽曆</option>
                  <option value="1">農曆</option>
              </select>


              <select name="year" >
                  <option value="00" selected="selected">1987</option>
                  <option value="01">1989</option>
                  <option value="02">1990</option>
              </select>


              <select name="month" >
                  <option value="000" selected="selected">02</option>
                  <option value="001">05</option>
                  <option value="002">09</option>
              </select>


              <select name="day" >
                  <option value="003" selected="selected">10</option>
                  <option value="004">15</option>
                  <option value="005">30</option>
              </select>
          </td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;&nbsp;所在地
                <select name="country">
                    <option value="966" selected="selected">中國</option>
                    <option value="967">美國</option>
                    <option value="968" >墨西哥</option>
                </select>
                <select name="city">
                    <option value="010" selected="selected">北京</option>
                    <option value="021" >上海</option>
                    <option value="025" >南京</option>
                </select>
                <select name="town">
                    <option value="123" selected="selected">中部</option>
                    <option value="124" >西部</option>
                    <option value="125" >東部</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;&nbsp;驗證碼
                <textarea name="comfirm" rows="5" cols="30"></textarea>
            </td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="qq" type="checkbox" value="131">同時上傳到QQ空間</td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="accept" type="checkbox" value="132">我已盡閱讀並贊成網站協議</td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;上傳照片
                <input type="file">
                <input name="img" type="submit" value="上傳">
            </td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input name="put" type="submit" value="當即註冊">
                <input name="res" type="reset" value="從新填寫">

            </td>
        </tr>

    </table>

</form>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。