1

我有一个拼凑在一起的联系表格。经过多次努力,该表格的工作方式完全符合我的需要,但看起来不正确。电话号码的前两个字段的外观与其他字段不同。我怎样才能让前两个看起来像其他三个?

*是的,我确信在学习时此代码中有很多错误,但目前它正在工作。在阅读/了解更多以纠正问题后我会回去(希望如此)。我怎样才能让前两个看起来一样?谢谢

    <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>
4

5 回答 5

4
#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;    
}

小提琴

在此处输入图像描述

永远不要使用 < Center > 标签..!

此功能已从 Web 中删除。尽管某些浏览器可能仍然支持它,但它正在被删除。不要在旧项目或新项目中使用它。使用它的页面或 Web 应用程序可能随时中断。

为了给电话文本框添加效果,将类添加到输入文本框并将css添加到类

人机界面

 <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;
}

演示

在此处输入图像描述

更新的小提琴

在此处输入图像描述

于 2014-02-12T08:01:48.423 回答
1

您首先需要在最上面的样式中删除背景颜色和边距之间的引号。

我认为这是因为您将第二个表单放置在 div 中,宽度为 50%。它被居中,因为它具有<center>作为父元素。该中心在 HTML5 中已弃用。这应该在 CSS 中完成。有关详细信息,请参见此处

对于您的代码,请尝试使用括号或 Sublime Text。我在工作中使用括号。

此外,您无需再声明type="text/javascript"。您可以删除它以获得更清晰的代码。

对于学习如何做前端,这是一个很好的尝试。当您觉得自己开始理解时,请查看 Twitter Bootstrap。

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

于 2014-02-12T07:18:59.933 回答
0

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

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

你应该看看像 bootstrap 或 Foundation 这样的 CSS 框架,它会帮助你轻松编写漂亮的表单。

于 2014-02-12T07:07:01.410 回答
0

我认为你的两个输入字段看起来一样。它取决于从导入的 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.
于 2014-02-12T07:17:30.560 回答
0
.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 -->
于 2014-02-12T07:26:07.840 回答