整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
lt;input>比較重要
<type>屬性:<text>文本框 <password>密碼框 <checkbox>復選框 <radio>單選按鈕 <submit> <reset> <file> <hidden> <image> <button>
默認屬性為<text>
<name>屬性指定表單元素的名稱
<value>屬性指定表單元素的初始值
<size>屬性指表單元素的初始寬度 一般用于文本框和密碼框
<maxlength>屬性指可在<text>或<password>元素中輸入最大的字符串 一般用于文本框和密碼框
<checked>屬性指此屬性只有一個值，如果不選中就不用添加此屬性 一般用于單選按鈕和復選框
<readonly>文本標簽指定為readonly文本不允許更改 一般用于文本框和密碼框
多行文本域<textarea > <cols>寬度 <rows>高度
<submit>提交按鈕
<reset>重置按鈕
<button>普通按鈕
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form name="myfoem" action="" meathod="post">
用戶id<input type="text" name="userid" size="25" value="用戶id自動生成" readonly="readonly"/><br />
密碼<input type="password" name="realname"/><br />
自我評價：<textarea name="msg" cols="40" rows="5">請輸入自我評價的內容···</textarea><br />
<input type="submit" value="提交"/><br />
<input type="reset" value="重置"/><br />
<input type="button" value="普通按鈕" onclick="window.alert('你好’)"/><br />
</form>
</body>
</html>
茅臺集網頁設計要是用HTML DIV+CSS JS等來完成頁面的排版設計。
網頁有搜素框 導航欄 js圖片輪播；
網頁由網站首頁，公司簡介，公司發展歷程，最新新聞動態組成；
具體效果圖展示：
計網站時，關于我們頁面和聯系頁面（contact us page）往往是必要頁面之一。雖然只是一個簡單的頁面，但要真的能讓用戶有聯系你的沖動還是很有挑戰性。如果說，用戶點擊了聯系頁面，用戶其實已經在嘗試聯系你了，這個時候，你需要提供的，不是花哨的設計，而是直觀的聯系方式，不阻礙用戶嘗試聯系你的行為。但話又說回來，如果你有信心設計得美觀，新穎，自然是最好，而且簡潔也不意味著簡單。今天我和大家分享12個聯系我們表單和頁面設計模板和例子，如果你喜歡，可以用在你的網頁設計里哦。
特色：
該模板是一個響應式的聯系表單模板，它具有不錯的布局，可以自適應任何大小的屏幕。憑借其簡單的白色界面，您可以收集客戶信息，包含姓名，電子郵件，聯系電話，網站和消息等。
使用模板：
https://www.jotform.com/form-templates/responsive-layout-general-inquiry-contact-form
特色：
該模板是一個基于CSS3和HTML5的簡易聯系表格，可以在任何不同行業的網站上使用。 該聯系表單包含有Google地圖背景，可以準確地展示你公司在地圖上的位置。此外，該模板還帶有常用的表單字段和標題，其圖片精致，文字簡練，可以鼓勵訪客與你取得聯系，也有助你收集用戶信息，包括姓名，電子郵件，消息字段等。
使用模板：https://colorlib.com/wp/template/contact-form-v15/
特色：
該模板是一個簡易的免費HTML5聯系表單模板。它有一個自定義風格的按鈕，采用了純色配色方案，響應式設計使其在任何網頁和移動屏幕上可以完美顯示。該模板發表于2018年5月，采用了最新設計趨勢，為你提供一個非常不錯的收集用戶信息的解決方案。
使用模板：https://colorlib.com/wp/template/contact-form-v10/
特色：
該模板是一個動態的聯系表格，有非常不錯的交互設計，絕對是一個可以讓訪客為之驚嘆的聯系頁面設計。該模板是一個整頁的聯系表單，擴展了JavaScript和CSS3，它非常適合兒童類網站，或是動畫效果突出的網站。
使用模板：https://codepen.io/anon/pen/OMMOaO/
特色：
該模板是一個關于我們頁面模板的響應式引導程序，它包含關于我們網頁所需的所有元素。此模板主要有3個部分：團隊介紹，聯系我們表單和客戶介紹。如果你需要一個包含干凈聯系表單的完整的關于我們頁面設計，那么此模板是你的最佳選擇。該頁面包含的聯系表單很簡單，有一個大文本框，可以了解用戶的想法。
使用模板：https://mobirise.com/bootstrap-template/about-us-page-template/
特色：
Bootstrap 3聯系表單是一個完全響應的網站聯系頁面。這個模板與常見的普通聯表單設計完全不同，具有夢幻般的全屏圖像背景。該模板還有優秀的配色方案，在深色背景和白色表單之間創建出強烈的對比，刺激用戶反饋。它還有一個大的文本框，可以接收用戶想要表達的任何信息。
使用模板：http://reusableforms.com/d/e2/bootstrap-3-contact-form
特色：
聯系表格HTML / CSS模板是另一個出自reusableforms.com網站的聯系我們頁面模板設計之一。最大的一個亮點是大圖背景，十分美觀，具有很強的吸引力。該模板的動畫設計也很出彩，能與用戶進行有效的互動，用戶使用起來，不僅有趣，也很受用。
使用模板：http://reusableforms.com/d/o3/contact-form-css-template
設計：
HTML5聯系表單簡單而美觀，具有很棒的交互動態功能。此表單使用CSS3和HTML5創建。可以輕松自定義設計以及在任何屏幕上自適應。你只需復制并粘貼HTML和CSS代碼即可將該模板添加到你的網站中。該HTML5表單包含所有必填字段，例如姓名，電子郵件，電話和消息等。最后，配色方案也值得一提，明亮鮮艷，很具有吸引力。
使用模板：https://codepen.io/codeconvey/pen/rgiLB/
4個最佳免費響應式HTML5聯系表格和聯系我們頁面例子
9. Choice Screening
Choice Screening的“聯系我們”頁面很出彩，你也許第一眼就會被他們的大標題吸引。該網站所有的頁面都組織有序，聯系我們頁面還包含有聯系信息，提供了每個不同部門的電子郵件，再后是一個聯系表單。對于大多數企業來說，表單顯得有點冗長，但對于需要運行各種背景調查的企業而言，表單字段可能是幫助他們查詢信息的必要條件。
查看例子：https://www.choicescreening.com/contact-choice-screening
伴隨移動端設備使用的不斷增加，Google也在其搜索引擎結果頁面上大力支持適合在移動設備瀏覽的網站，網頁設計的自適應要求越來越高。該模板就是在這種設計趨勢下專門制作的，具有非常細致美觀的自適應力，任何屏幕的尺寸都可以完美展示。該模板有一個簡化導航設計，大型CTA按鈕通過拇指可以輕松點擊，大型表單字段可以用于收集用戶反饋。
查看例子：http://www.weifieldcontracting.com/contact/
Mockpplus是國內最好的原型工具提供者，網站設計簡潔沉靜，聯系我們頁面和一般的頁面設計不太一樣，沒有使用表單，而是根據用戶可能的不同需求提供了更加直觀的聯系方式。Mockplus在聯系我們頁面特意加入了Slack鏈接，方便用戶找到Mockplus專屬社群，為用戶提供了一種及時交流的方式，很是用心。
查看例子：https://www.mockplus.com/support
該網站的聯系我們頁面可以說是我最喜歡的設計之一。它的配色和設計感都非常獨特，最大的亮點是Say Hello大文本標題，這個行動召喚按鈕非常能夠調動用戶的情緒，刺激用戶產生互動。
查看例子：http://www.helloinnovation.com/contact/
以上就是本次推薦的12個聯系我們表單和頁面設計。總的來講，聯系我們頁面就只有一個最大的用途——刺激用戶產生聯系互動。因此，聯系我們頁面的設計應該是簡潔的，聯系方式多樣的，最好能提供不同業務的不同聯系方式，以便用戶能快速的找到自己需要的聯系方式。希望你喜歡今天的分享。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
