样式电子邮件表单域

Question

我有一个拼凑在一起的联系表格。在经过多次挣扎之后，表格完全按照我需要的方式工作，但看起来并不正确。 电话号码的前两个字段与其他字段的外观不同。 如何让前两个看起来像另一个？

*是的我确定此代码中存在很多错误，因为我正在学习，但目前它正在运行。我会在阅读/学习更多内容之后回去纠正问题（希望如此）。 我怎么能让前两个看起来一样？ 感谢

    <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

请勿使用＆lt; Center＆gt;标签..！

  

此功能已从网络中删除。虽然有些浏览器可能   它仍然支持它，它正在被淘汰。不要使用它   在旧的或新的项目中。使用它的页面或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

您首先需要删除背景颜色和最高风格边距之间的引用。

我认为是因为你已经将第二种形式放在div中，宽度为50％。它的中心是因为它有<center>作为父元素。该中心在HTML5中已弃用。这应该在CSS中完成。有关详细信息，请参阅here。

对于您的代码，请尝试使用Brackets或Sublime Text。我使用Brackets工作。

此外，您不再需要声明type="text/javascript"。您可以删除它以获得更干净的代码。

为了学习如何做前端，这是一个很好的尝试。如果您觉得自己已经开始理解，请查看Twitter Bootstrap。

这是我清理代码的方法。请注意它在JavaScript中给出的一个警告。 http://jsbin.com/hijec/1/edit

Answer 3

我猜你在谈论换行符......只需删除它们！ http://jsfiddle.net/L92dp/1/

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

你应该看一下CSS框架，比如bootstrap或foundation，它可以帮助你轻松编写漂亮的表单。

Answer 4

我认为你的两个输入字段看起来都一样.it取决于使用导入的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 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;
}

尝试使用注释来帮助整理代码，以便与表单进行比较和对比。

<!-- my awesome form 1 -->

(all the form code)

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

<!-- my awesome form 2 -->

(all the form code)

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