對HTML5標籤的認識(四)

時間 2019-12-08

標籤 html5 html 標籤認識欄目 HTML5 简体版

原文原文鏈接

這篇隨筆講講HTML5中的表單和表單的一些元素css

1、表單的做用是什麼？html

概念：表單在網頁中主要是負責對數據信息的採起，表單一共分紅三個部分：java

一、表單的標籤：這裏麪包含了處理表單的數據所用CGI程序以及數據提交到服務器的方法。數據庫

二、表單域元素：包含着文本框，和密碼框，多行文本框，複選框，單選框，下拉選擇框和文件上傳框等等元素。編程

三、表單按鈕：包括提交的按鈕，復位按鈕和通常的按鈕，用於將數據傳送到服務器上的CGI腳本或者取消輸入，還能夠用表單按鈕來控制其餘定義了處理腳本的處理工做。瀏覽器

CGI是什麼呢？安全

　　CGI是Web服務器運行時外部程序的規範，按CGI編寫的程序能夠擴展服務器功能。CGI 應用程序能與瀏覽器進行交互，還可經過數據庫API 與數據庫服務器等外部數據源進行通訊，從數據庫服務器中獲取數據。格式化爲HTML文檔後，發送給瀏覽器，也能夠將從瀏覽器得到的數據放到數據庫中。服務器

2、表單標籤的認識編程語言

一、<form>標籤post

<form>標籤用於爲用戶輸入建立HTML表單，以下圖是最多見的表單：

表單能包含input元素好比文本字段，複選框，單選框，提交按鈕等等

表單的主要做用就是傳輸數據給服務器。

定義一個簡單的表單：

<!DOCTYPE html>
<html>
    <head>
        <title>Form</title>
    <head>
    <body>
        <form action="" method="get/Post">
            <p>姓名：<input type="text" name="txtName" /></p>
            <p>年齡：<input type="text" name="txtName" /></p>
            <input type="submit" value="提交" />
        </form>
    </body>
</html>

運行效果：

看到form元素裏面的Method屬性它有連兩個值 set和Post

它們的區別：

一、get是從服務器上獲取數據，post是向服務器傳送數據。

二、對於get方式，服務器端用Request，QueryString獲取變量值，對於post方式，服務器端用Request，Form獲取提交的數據。

三、get安全性較低，post安全性較高。

action屬性是規定當提交表單時向何處發送表單數據。（大概瞭解）。

3、<input>標籤

定義：<input> 標籤規定用戶可輸入數據的輸入字段。

根據不一樣的 type 屬性，輸入字段有多種形態。輸入字段能夠是文本字段、複選框、密碼字段、單選按鈕、按鈕等等。

效果以下：

定義input能夠在文本框裏面輸入內容了。

type屬性：規定input元素的名稱

type屬性值默認text值，表示定義一個單行的文本字段（默認寬度爲 20 個字符）。

type屬性值有不少，以下圖：

作一個兩個文本輸入框和兩個單選按鈕還有一個提交按鈕的小案例：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Form</title>
 5     <head>
 6     <body>
 7         <form action="" method="get">
 8             <!--name屬性是定有一個input元素的名稱-->
 9             <!--文本輸入框-->
10             <p>姓名：<input type="text" name="txtName"></p>
11             <p>年齡：<input type="password" name="txtAge"></p>
12             <!--單選按鈕的屬性值爲radio，當你要定義單選按鈕時就用radio屬性值-->
13             <!--單選按鈕-->
14             <p>性別：<input type="radio" name="sex">男
15                     <input type="radio" name="sex">女</p>
16             <!--提交按鈕-->
17             <input type="submit" value="提交" />
18             
19         </form>
20     </body>
21 </html>

input有不少屬性，好比id，name，type，checked，size,max,min,height,form,width,value,list這些常常用的到的屬性。

就拿checked屬性來講，咱們在註冊一個帳號的時候常常能看到性別選項，按照人口慣例，是男性的機率偏多，因此在選擇中時爲了方便，咱們能夠給它一個默認選中男性(固然也能夠如今女性)，這樣讓用戶的體驗更好。

代碼實現：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Form</title>
 5     <head>
 6     <body>
 7         <form action="" method="get">
 8             <!--name屬性是定有一個input元素的名稱-->
 9             <!--文本輸入框-->
10             <p>姓名：<input type="text" name="txtName"></p>
11             <p>年齡：<input type="password" name="txtAge"></p>
12             <!--單選按鈕的屬性值爲radio，當你要定義單選按鈕時就用radio屬性值-->
13             <!--單選按鈕-->
14             <p>性別：<input type="radio" name="sex" checked="checked" >男
15                     <input type="radio" name="sex">女</p>
16             <!--提交按鈕-->
17             <input type="submit" value="提交" />
18             
19         </form>
20     </body>
21 </html>

運行效果：

多選框：

<!DOCTYPE html>
<html>
    <head>
        <title>textarea</title>
    <head>
    <body>
        <p>愛好：<input type="checkbox" name="游泳" >游泳
                  <input type="checkbox" name="唱歌">唱歌
                  <input type="checkbox" name="籃球">籃球
                  <input type="checkbox" name="跳舞">跳舞              
                  </p>
    </body>
</html>

運行效果：

4、<textarea>標籤

定義：<textarea>標籤訂義多行的文本輸入控件。文本中可容納無限數量的文本，可經過clos和rows屬性來規定textarea的尺寸，不過更好的辦法就是使用css的height和width屬性。

<!DOCTYPE html>
<html>
    <head>
        <title>textarea</title>
    <head>
    <body>
        <textarea rows="3" cols="20">textarea標籤是多行的文本輸入控件。可經過rows和cols來改變尺寸</textarea>
    </body>
</html>

運行效果：

5、<button>標籤

定義：<button>標籤是定義一個按鈕。在button元素的內部，你能夠放置內容，好比文本，圖像，這是該元素於使用input元素建立的按鈕之間的不一樣之處。相比<input type=" ">有更強大的功能和更豐富的內容。

請始終爲按鈕規定type屬性，屬性 Internet Explorer 的默認類型是button 而其餘的瀏覽器中的默認值是「submit」。

定義一個按鈕：

<!DOCTYPE html>
<html>
    <head>
        <title>textarea</title>
    <head>
    <body>
        <button type="button">點擊</button>
    </body>
</html>

注意：若是在HTML表單中使用button元素，不一樣的瀏覽器會提交不一樣的按鈕值，請使用input元素在HTML，表單中建立按鈕。

6、<select>標籤

定義：select元素可建立單選多選菜單，<select>元素中的<option>標籤用於定義列表中的可用選項。

下拉菜單：

代碼實現：

<!DOCTYPE html>
<html>
    <head>
        <title>textarea</title>
    <head>
    <body>
        <select>
            <option value="HTML5">HTML5網頁編程語言</option>
            <option value="CSS">css樣式</option>
            <option value="java編程">Java編程</option>
            <option value="JavaScript">JavaScript</option>    
        </select>
    </body>
</html>