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