北冥復習html（三）

一、表單介紹

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

作用：提交用戶輸入的資料至服務端

二、結構

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

解釋：

form ==》宣告一個表單
action ==》向何處發送資料
method ==》提交方式：get----明文發送； post----安全不可見

三、元素

action：　向何處發送資料

data：　　供自動插入資料

input：　表單元素，里面有 type = 型別，name = 名字，value = https://www.cnblogs.com/beimingdaoren/p/默認存放資料，size = 長度，maxlength = 表單元素最大輸入值，checked = 指定表單元素是否選中

以實體說明吧，簡單明了：

1、登錄

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

顯示效果：

2、性別選擇：

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

顯示效果：

3、興趣選擇

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

顯示效果：

4、學歷選擇

    <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>

顯示效果：

5、按鈕

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

顯示效果：

6、多文本域

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

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

顯示效果：

7、郵箱

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

顯示效果：

8、年齡

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

顯示效果：

9、音量

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

顯示效果：

10、關鍵字

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

顯示效果：

你輸入內容的時候，搜索框后邊會自動出現一個小×，點擊這個小×，可以清除輸入的內容，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/2357.html

標籤：HTML5

上一篇：串列、表格與媒體元素

下一篇：入門云開發