整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
圖1
圖2
圖2
圖3
我們在瀏覽網頁時會經常遇到注冊會員的界面，大概像這個樣子：
或填寫問卷的情況，大概像這個樣子：
我們把這些內容稱之為表單。
如何向自己的頁面中添加表單呢？
添加表單的操作和添加表格類似。
首先我們要在頁面中寫入<form></form>標簽，這是向瀏覽器聲明這里是個表單，它本身并不會顯示在頁面中，但是可以全局控制表單元素的一些屬性，就像表格中的<table></table>標簽。
然后再在<form></form>中寫入<input/>標簽，這個標簽的內容就會顯示在頁面中了，就像表格元素中的<tr><td>標簽。不同的是<input/>沒有結尾標簽。
下面讓我們寫一寫。
首先復制"第一個頁面.html"文件。改名為"表單.html"，然后清空<body></body>中的內容，將<head></head>中間的<title></title>中間的內容改為"表單"，這樣方便我們查看測試頁面。
示例代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<title>表單 </title>
</head>
<body>
</body>
</html>下面我們要寫入表單內容，示例代碼如下：
<form> <input/></form>頁面效果如下：
只有一個輸入框。下面，我們為輸入框添加名稱"會員名稱："，示例代碼如下：
<form> 會員名稱： <input/></form>效果如下：
這樣我們就寫出了一個簡單的表單，如果為表單添加更多內容和設置，就要繼續了解表單的屬性。
表單元素屬性1
<input/>標簽通過改變type屬性可以變換出不同功能，在頁面制作中，我認為<input/>標簽中的type屬性最重要。
下面我們來看一下type屬性不同的值。
圖片來源W3School
輸入文字：首先，先來看text值。說明很明確，這個屬性值的<input>標簽主要是用來輸入文本，比如"會員名稱。"
示例代碼如下：
<form> 會員名稱： <input type="text"/></form>頁面效果如圖所示：我胡亂輸入了幾個字母
如果不指定type的text值的話，表面看起來并不影響輸入內容，但是表單的內容最終是要提交到服務器的，如果不注明type="text"，服務器就不能判斷你輸入的字符到底是一段代碼還是一段字符串組成的文本，因此，我們為了讓提的交數據在服務器端能被準確識別，一定要寫好type的屬性。
除此之外變換type值也能為<input/>變換不同功能。
制作提交按鈕：例如"submit"（提交）。在我們輸入完表單內容后，一般都有一個提交按鈕，這個提交按鈕也是由<input/>標簽來完成的。
示例代碼如下：
<form> 會員名稱： <input type="text"/> <input type="submit"/></form>如圖所示：
因為<input/>是內聯元素，所以"submit"按鈕會和之前的<input>顯示在一行，換行的話很簡單，可以使用<br>標簽。
大家觀察一下發現，我們并沒有給"submit"按鈕指定文字，在按鈕上卻出現了"提交查詢"的字樣，這是html默認的，如果我們要改變按鈕文字就要使用value這個屬性。示例代碼如下：
<input type="submit" value="提交"/>頁面效果如下：
其實我們在輸入文字時，輸入框里會經常有提示文字，當我們點擊輸入框時，提示文字消失了，這個功能怎么實現？
這又涉及到一個新屬性，叫做"placeholder"（提示文字）。
示例代碼如下：
<input type="text" placeholder="請輸入英文或漢語拼音"/>頁面效果如下：
下面我們來練習一下，示例代碼如下：
<form>
會員名稱：
<input type="text" placeholder="請輸入英文或漢語拼音"/><br>
會員密碼：<input type="text" placeholder="請輸入英文字母、特殊符號、數字"/><br>
確認密碼：<input type="text" /><br><input type="submit" value="提交"/><br>
</form>頁面效果如下：（想把密碼字符顯示為小圓點的讀者可以先去屬性值列表中找找"password"看看，咱們后面會細致講解）
制作多選表單：多選表單的type屬性值是"checkbox"。
我猜大家也猜到該怎么寫了，示例代碼如下：
<form>
興趣愛好：<br>
<input type="checkbox" name="hobby" value="reading"/>讀書
<input type="checkbox" name="hobby" value="film"/>電影
<input type="checkbox" name="hobby" value="painting"/>繪畫
<input type="checkbox" name="hobby" value="music"/>音樂
<br>
<input type="submit" value="submit"/>
</form>頁面效果如下：
大家可以點點試試，可以多選了。如圖：
這時小伙伴們會發現在這組示例中，出現了name和value兩個屬性。
先說value，在"submit"中，value的值也就是"提交"二字，是直接顯示在按鈕上的，而這里的value值卻沒有顯示，顯示出來的是我們在<input/>標簽后面輸入的"讀書、電影、繪畫、音樂"這樣的字樣。也就是說這里的value不會顯示為選框的名字！
那value屬性是干嘛的呢？實際上"checkbox"屬性下的value屬性值是寫給后臺的服務器看的。
我們向服務器提交選擇后，服務器把name的名稱作為數據的大類名稱，把value值作為大類中的子類名稱來存儲或分析數據。
比如這個選擇表單是有關興趣愛好的，因此數據的大類屬于"愛好"（hobby），即name="hobby"，hobby中又分為"reading"（讀書），"film"（電影），"painting"（繪畫），"music"（音樂），即value="reading"、value="film"等等。這樣不同用戶的不同選擇就按照這個數據組織方式提交給了服務器。
大家明白了嗎？
另外需要說明的是，name和value最好使用英文或拼音來書寫！
雖然我們目前不涉及后端服務器上的操作，但是在學習時要養成規范書寫的習慣。
其實，除了type="submit"的情況外，其他需要輸入信息的type屬性類型都是要寫name屬性的，不過不同type屬性類型的value卻不太一樣。
下面我們來看看type="text"時的標準寫法：當type="text"的時候，不必寫value屬性，因為value值為用戶輸入的內容
<form>
會員名稱：
<input type="text" placeholder="請輸入英文或漢語拼音" name="memberName"/><br>
會員密碼：
<input type="text" placeholder="請輸入英文字母、特殊符號、數字" name="passWord"/><br>
確認密碼：<input type="text" name="confirmPassWord"/><br>
<input type="submit" value="提交"/><br>
</form>今天的內容先到這里，我們明天繼續講解"表單元素"。
喜歡的小伙伴請關注和轉發，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什么？——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
HTML頁面中head標簽有啥用？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
對調研對象的不同，對問卷頁面進行個性化設置，讓受訪者得到更好的答題體驗是所有調研者考慮的重要問題之一。
《易研問卷平臺》為此提供了多種問卷頁面設置的方式，本操作教程通過五個步驟簡要介紹，讓您輕松完成問卷背景頁面的個性化設置，實現“始于頁面顏值，敬于調研主題，終于研究者人品”。
頁面設置入口，以下所有的頁面屬性設置均在以下頁面設置
第一步 設置主題
在問卷設置之前，首先需要設置調查問卷的主題，在調查問卷的設置頁面，點擊【主題】，選擇頁面主題，目前《易研問卷平臺》提供了學校主題、考試主題、節日主題等多種問卷主題。
①在調查問卷的設置頁面，設置頁面背景圖。受訪者可自行提供圖片或者由由公司設計人員設計圖片，將圖片移交技術人員生成圖片鏈接，將粘貼到【頁面背景圖】里。
②設置頁面透明度，進入 json 編輯頁面找到頁面版心, 將原頁面版心顏色代碼 "typePageUnderpainting": "#000000", 替換為"typePageUnderpainting": "rgba(255,255,255,數字)"，數字設置區間為0-1，數字越接近1，版心透明度越低。
③在調查問卷的設置頁面，設置版心背景色。點擊【版心背景色】，在調色板中對版心顏色進行設置，并點擊確定。
④在調查問卷的設置頁面，設置頁面背景色。點擊【頁面背景色】，在調色板中對版心顏色進行設置，并點擊確定。
⑤在調查問卷的設置頁面，設置版心寬度。受訪者可根據需求設置【版心寬度】大小。
⑥在調查問卷的設置頁面，設置版心背景圖。（不常用）受訪者可自行提供圖片或者由由公司設計人員設計圖片，將圖片移交技術人員生成圖片鏈接，將粘貼到【版心背景圖】里。
①在調查問卷的設置頁面，設置問卷標題。點擊問卷調查右側編輯按鈕，進入編輯頁面，點擊【通用】，在空白面板上面寫問卷標題，對問卷標題文字進行格式的設置（與Word類似）。
效果如下：
②在調查問卷的設置頁面，設置完成后的文檔（如果沒有設置，系統默認原始文檔）。點擊問卷調查右側編輯按鈕，進入編輯頁面，點擊【完成后的Html】，在空白面板上面寫問卷標題，對問卷標題文字進行格式的設置（與Word類似）。
效果如下：
③在調查問卷的設置頁面，設置問卷題目邊距及內容縮進。受訪者根據需求可設置大小。注：上邊距：與上一道題目之間的間距；下邊距：與下一道題目之間的間距；左邊距：與版心左側邊距；右邊距：與版心右側邊距；內容左縮進：將題目選項從左向右縮進一定的距離（設置邊距及縮進10個單位最佳）。
第四步 預覽問卷并檢查
進入【預覽問卷】，查看整體效果，如有其它需求可進入編輯頁面繼續設置。
樣本庫導入并映射成功后，即可編輯其它主體題目。全部編輯完成后發布問卷，在問卷發布設置中點擊【發布問卷】并確定。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
