首頁 > 文章 > web前端 > html中表格form相關的知識講解（程式碼範例）

html中表格form相關的知識講解（程式碼範例）

不言原創: 2018-08-30 11:36:082374瀏覽

這篇文章帶給大家的內容是關於html中表格form相關的知識講解（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

在新瀏覽器視窗中開啟連結

#3499910bf9dac5ae3c52d5ede7383485標籤在預設的情況下，連結的網頁是在目前瀏覽器視窗中打開，有時候我們需要在新的瀏覽器視窗中開啟。

<a href="目标网址" target="_blank">新的浏览器窗口打开</a>

mailto

3499910bf9dac5ae3c52d5ede7383485標籤還有一個作用是可以連接Email地址，使用mailto能讓訪客便捷向網站管理員發電子郵件。

mailto 郵件位址，瀏覽器會自動呼叫預設的用戶端電子郵件程式(如OutLock)，並在收件者方塊中自動填上收件者的位址。

cc= 副本地址，在收件人地址後使用cc=地址，可填寫副本地址。

bcc= 密件副本地址，在收件人地址後用bcc=地址，可以填上密件抄送地址

;多個收件者、抄送、密件抄送人，用分號隔開多個收件者的位址，可以實現傳送給多個收件者功能

subject= 郵件主題，用subject=新增郵件主題

body 郵件內容，用body=新增郵件的內容

如果mailto後面同時有多個參數的話，第一個參數必須以"?"開頭，後面的參數每一個都以"&"分隔。

<a href="mailto:123456@qq.com">发送</a>
<a href="mailto:123456@qq.com?cc=123456@qq.com">发送</a>
<a href="mainto:123456@qq.com?bcc=654321@qq.com">发送</a>
<a href="mailto:123456@qq.com;654321@qq.com">发送</a>
<a href="mailto:123456@qq.com?subject=发送电子邮件">发送</a>
<a href="mailto:123456@qq.com?body=欢迎来到HTML代码世界">发送</a>

form

使用HTML表單(form)與使用者互動。表單是可以把瀏覽器輸入的資料傳送到伺服器端，這樣伺服器端程式就可以處理表單傳過來的資料。

ff9c23ada1bcecdd1a0fb5d5a0f18437：ff9c23ada1bcecdd1a0fb5d5a0f18437標籤是成對出現的，ff9c23ada1bcecdd1a0fb5d5a0f18437開始，f5a47148e367a6035fd7a2faa965022e結束

#action ：瀏覽器輸入的資料被傳送到的地方

method：資料傳送的方式(get/post)

注意：所有表單控制項(文本框、文字網域、按鈕、單選框、複選框等)都必須放在ff9c23ada1bcecdd1a0fb5d5a0f18437f5a47148e367a6035fd7a2faa965022e標籤之間(否則使用者輸入的資訊可提交不到伺服器上)

<form method="传送方式" action="服务器文件">
<form method="post" action="save.php">
    <label for = "username">用户名：</label>
    <input type = "text" name="username" />
    <input for = "pass">密码:</label>
    <input type = "password" name="pass">

form表單中的label標籤

label標籤的作用是為滑鼠使用者改進了可用性。如果在label標籤內點擊文本，就會觸發此控制項。是說當使用者點選選取該label標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制項上(就自動選取和該label標籤相關聯的表單控制項上)。

注意：標籤的for屬性中的值應與控制項的id屬性值一定要相同。

<label for="控件id名称">

文字輸入框、密碼輸入框

#當使用者要在表單中鍵入字母、數字等內容時，就會用到文字輸入框。文字方塊也可以轉換為密碼輸入框。

type：當type="text"時，輸入框為文字輸入框；當type="password"時候，輸入框為密碼輸入框。

name：為文字方塊命名，以備後台程式ASP、PHP使用

value：為文字輸入框設定預設值。 (一般起到提示作用)

<form>
    姓名：
    <input type = "text" name="myName">
    <br/>
    密码：
    <input type = "password" name="pass">
</form>

文本域

當使用者需要在表單中輸入大段文字時，需要用到文本輸入域。

4750256ae76b6b9d804861d8f69e79d3標籤是成對出現的，4750256ae76b6b9d804861d8f69e79d3開始，40587128eee8df8f03d0b607fe983014結束;

#cols：多行輸入域的列數；

rows：多行輸入域的行數；

在4750256ae76b6b9d804861d8f69e79d340587128eee8df8f03d0b607fe983014标签之间可以输入默认值。注意cols和rows这两个属性可用CSS样式的width和height来代替：col用width、row用height来代替。

<form method = "post" action="save.php">
    <label>联系我们</label>
    <textarea cols="50" rows="10">在这里输入内容。。。</textarea>
</form>

单选框、复选框

在HTML中有两种选择框，单选框和复选框，两者的区别是单选框中的选项用户只能选择一项；复选框中用户可以任意选择多项甚至全选。

type：当type="radio"时为单选框，type="checkbox"时为复选框

value：提交数据到服务器的值

name：为控件命名

checked：当设置checked="checked"时，该选项被默认选中

注意：同一组单选按钮，name取值一定要一致，这样同一组的单选按钮才可以起到单选的用作。

下拉列表框

<option value=&#39;提交值&#39;>选项</option>

下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。

value='提交值'——>向服务器提交的值；选项——>显示的值

selected="selected"属性，则该选项就被默认选中。

下拉列表可以进行多选操作，在53ef528b06ec79ef05684370cfbe8ed2标签中设置multiple="multiple"属性，就可以实现多选功能，在window操作系统下，进行多选时按下Ctrl时同时进行单击(在Mac下使用Command+单击)，可以选择多个选项。

提交按钮和重置按钮

表单中有两种按钮可以使用，分别是提交按钮，重置按钮。

提交按钮：

type：只有当type值设置为submit时，按钮才有提交作用

value：按钮上显示的文字

重置按钮：

type：只有当type值设置为reset时，按钮才有重置作用

value：按钮上显示的文字

<input type="submit" value="提交">
<input type="reset" value="重置">

html中表格form相關的知識講解（程式碼範例）

相關文章