表單

北冥複習html（三）

1、表單介紹

概念：表單是一個包含表單元素的區域，表單元素是容許用戶在表單中輸入內容。

做用：提交用戶輸入的數據至服務端

2、結構

<form action = " " method = " get " enctype = " ">
<table border = 1></table>

 

解釋：

• form ==》 聲明一個表單
• action ==》 向何處發送數據
• method ==》 提交方式：get----明文發送； post----安全不可見 

3、元素

action：　 向何處發送數據

data：　　供自動插入數據

input：　   表單元素，裏面有 type = 類型，name = 名字，value = 默認存放數據，size = 長度，maxlength = 表單元素最大輸入值，checked = 指定表單元素是否選中

以實例說明吧，簡單明瞭：

一、登陸

    <from method = "post" action = "login.html">
        帳號：<input type = "text"/><br/>
        密碼：<input type = "password"><br/>
        <input type = "reset" value = "重置"/>
    </from>

顯示效果：

 

 

二、性別選擇：

    <input name="sex" type="radio" value="男" checked/>男
    <input name="sex" type="radio" value="女" />女

顯示效果：

 

 

三、興趣選擇

    <input type="checkbox" name="skill" value="talk" />演講
    <input type="checkbox" name="skill" value="code" checked/>編程
    <input type="checkbox" name="skill" value="manage" />管理 

顯示效果：

 

四、學歷選擇

    <select name="edu">
        <option value="1" selected="selected">小學</option>
        <option value="2">初中</option>
        <option value="3">高中</option>
        <option value="4">專科</option>
        <option value="5">本科</option>
    </select>

顯示效果：

 

五、按鈕

    <input type="reset" name="butReset" value="重置按鈕"/>
    <input type="submit" name="butSubmit" value="提交按鈕"/>
    <input type="button" name="butButton" value="普通按鈕"/>

顯示效果：

 

 

六、多文本域

<textarea name="show" cols="20" rows="10">文本內容</textarea>

其中：cols 文本域寬度，rows 文本域高度

顯示效果：

 

七、郵箱

    <input type="email" name="myEmail"/>
    <input type="submit" value="提交" />
    

顯示效果：

 

八、年齡

    <input type="number" name="age" min="1" max="100" step="1" />
    <input type="submit" />

顯示效果：

 

九、音量

    <input type="range" name="range1" min="0" max="100" step="1" />
    <input type="submit" />

顯示效果：

 

十、關鍵字

    <input type="search" name="so" />
    <input type="submit" />

顯示效果：

你輸入內容的時候，搜索框後邊會自動出現一個小×，點擊這個小×，能夠清除輸入的內容。