風格的電子郵件表單域

Question

我有一個拼湊在一起的聯繫表單。經過很多努力，表格完全按照我需要的方式工作，但看起來不正確。 電話號碼的前兩個字段與其他字段有不同的外觀。 我怎樣才能讓前兩個看起來像其他3？

*是的確定這個代碼中有很多錯誤，因爲我正在學習，但目前它正在工作。在閱讀/學習更多以糾正問題（希望）後，我會回去。 我怎樣才能讓前兩個看起來一樣？ 謝謝

<div style="background-color: #ff69b4;"margin: -5px 12px 0px 10px"><div style="margin-left:10px; margin-right: 10px;"> 
<center><br><br><div id="contentinner"> 
<div class="content"> 

<div class="form"> 
<form id="form1" method="post" action="form-process.php" onsubmit="return checkSelection('form1');"> 

<input type="hidden" name="thank_you_url" value="./thank you" /> 
<input type="hidden" name="error_url" value="./contact-us.php" /> 
<input type="hidden" name="subject" value="Contact from Website" /> 
<div style="width:50%"> 
<!-- Start Form Fields --> 

phone number<br> 
<input name="phone" required="required" type="phone" id="phone" /> 
<br>confirm phone 
<br> 
<input name="phone_confirm" required="required" type="phone" id="phone_confirm" oninput="check(this)" /> 
<script language='javascript' type='text/javascript'> 
function check(input) { 
if (input.value != document.getElementById('phone').value) { 
input.setCustomValidity('Phone Number Must be Matching.'); 
} else { 
// input is valid -- reset the error message 
input.setCustomValidity(''); 
} 
} 
</script> 


<br> 

<form action="demo_form.asp"> 
name<input type="text" name="name" required> 

email<input type="email" name="email" required> 




<label>more information<?php form_error('Comments');?></label> 
<textarea name="Comments" cols="" rows="" class="textarea" required></textarea> 









<!-- End Form Fields --> 

<input type="submit" class="button" value="Submit" /> 
</div> 

</div> 
</div> 

<script type="text/javascript"> 
<!-- 
function checkSelection(whichform) { 
if(document.forms[whichform].required.value) { 
    var required = document.forms[whichform].required.value.split(','), errors = false; 
    for(var i = 0; i < required.length; i++) { 
     if(document.forms[whichform][required[i]].value == "") { 
      errors = true; 
     } 
    } 
    if (errors) { 
     alert ('Whoops! You must fill in all required fields before you can continue.'); 
     return false; 
    } 
    else { 
     return true; 
    } 
} 
} 

//--> 
</script> 

</form> 
</div></div> 
</center> 

Answer 1

#wrapper { 
    background-color: #ff69b4; 
    width:600px; 
    height:400px; 
} 
.outer { 
    margin-left:10px; 
    margin-right: 10px; 
    width:300px; 
    margin:auto; 
    background-color:grey; 
    height:350px; 
} 
input 
{ 
    width:150px; 
    height:20px; 

} 
textarea 
{ 
width:150px;  
} 

fiddle

不要用不完< Center>標籤..！

此功能從網上刪除。雖然有些瀏覽器可能仍支持它，但它正在被丟棄。不要在舊項目或新項目中使用它 。使用它的頁面或Web應用程序可能會在任何時間中斷 。

爲了讓效果的手機文本框中添加類的輸入文本框，並添加CSS到類

HTML

<input class="phones" name="phone" required="required" 
     type="phone" id="phone" /> 
<br> 
    confirm phone 
    <br> 
    <input class="phones" name="phone_confirm" required="required" 
      type="phone" id="phone_confirm" oninput="check(this)" /> 

的CSS

.phones 
{ 
    background-color:#003366; 
    color:white; 
} 

Demo

Updated fiddle

Answer 2

我想你是在談論換行符......只是刪除它們！ http://jsfiddle.net/L92dp/1/

confirm phone 
<br> <!-- remove this --> 

你應該看看像引導或基金會CSS框架，它會幫助你輕鬆寫出漂亮的形式。

Answer 3

我認爲你的兩個輸入字段看起來都一樣，它取決於從導入的Css文件中使用什麼樣式。首先檢查你的Css文件中應該有相同類型的字段 如果樣式寫在ID的基礎上

id="phone" & id="phone_confirm" have same style 
or 
on the basis of name both phone and phone_confirm should be same. 

Answer 4

您首先需要刪除背景顏色和最上面樣式邊距之間的引號。

我認爲這是因爲你已經把第二種形式放在寬度爲50％的div中。它的居中，因爲它有<center>作爲父元素。該中心在HTML5中已棄用。這應該在CSS中完成。有關詳細信息，請參見here。

對於您的代碼，請嘗試使用括號或崇高文本。我使用Brackets進行工作。

此外，您不需要聲明type="text/javascript"了。您可以刪除更乾淨的代碼。

爲了學習如何做前端，這是一個很好的嘗試。當你覺得自己開始明白時，請查看Twitter Bootstrap。

這是我的清理你的代碼。注意它在JavaScript中給你的警告。http://jsbin.com/hijec/1/edit

Answer 5

.content { /*color: #fff;*/ } 

和/或

.form { /*color: #fff;*/ } 

和/或

#form1 { /*color: #fff;*/ } 

和/或

input { /*color: #fff;*/ } 

和涼爽的鏈接

http://css-tricks.com/styling-texty-inputs-only/

它也可能是更容易閱讀，如果你刪除你的網線和不必要的嵌套的div等：

<div style="background-color: #ff69b4;"margin: -5px 12px 0px 10px"><div style="margin-left:10px; margin-right: 10px;"> 

到

.pickaclassname { 
    background-color: #ff69b4; 
    margin: -5px 12px 0px 10px; 
    margin-left:10px; 
    margin-right: 10px; 
} 

嘗試使用評論來幫助組織你的c與表格進行比較和對比。

<!-- my awesome form 1 --> 

(all the form code) 

<!-- // end form 1 --> 

<!-- my awesome form 2 --> 

(all the form code) 

<!-- // end form 2 -->