Question

你可以告诉我为什么我的登记表不起作用吗？是因为CSS？当我单独使用注册表单代码时，它运行良好。但是当我将代码与导航栏组合在一起时，除了密码框之外我无法填写该框。

new.php

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="stylenew.css" />

<script type="text/javascript">

 $(document).ready(function() {
/*
* In-Field Label jQuery Plugin
* http://fuelyourcoding.com/scripts/infield.html
*
* Copyright (c) 2009 Doug Neiner
* Dual licensed under the MIT and GPL licenses.
* Uses the same license as jQuery, see:
* http://docs.jquery.com/License
*
* @version 0.1
*/
(function($) { $.InFieldLabels = function(label, field, options) 
             { var base = this; base.$label = $(label); base.$field = $(field); base.$label.data("InFieldLabels", base); base.showing = true; base.init = function() 
             { base.options = $.extend(
             {}, $.InFieldLabels.defaultOptions, options); base.$label.css('position', 'absolute'); var fieldPosition = base.$field.position(); base.$label.css(
             { 'right': fieldPosition.left, 'top': fieldPosition.top }).addClass(base.options.labelClass); if (base.$field.val() != "") 
             { base.$label.hide(); base.showing = false; }; base.$field.focus(function() 
             { base.fadeOnFocus(); }).blur(function() 
             { base.checkForEmpty(true); }).bind('keydown.infieldlabel', function(e) 
             { base.hideOnChange(e); }).change(function(e) 
             { base.checkForEmpty(); }).bind('onPropertyChange', function() 
             { base.checkForEmpty(); }); }; base.fadeOnFocus = function() 
             { if (base.showing) 
             { base.setOpacity(base.options.fadeOpacity); }; }; base.setOpacity = function(opacity) 
             { base.$label.stop().animate({ opacity: opacity }, base.options.fadeDuration); base.showing = (opacity > 0.0); }; base.checkForEmpty = function(blur) 
             { if (base.$field.val() == "") { base.prepForShow(); base.setOpacity(blur ? 1.0 : base.options.fadeOpacity); } else 
             { base.setOpacity(0.0); }; }; base.prepForShow = function(e) 
             { if (!base.showing) 
             { base.$label.css(
             { opacity: 0.0 }).show(); base.$field.bind('keydown.infieldlabel', function(e) 
             { base.hideOnChange(e); }); }; }; base.hideOnChange = function(e) 
             { if ((e.keyCode == 16) || (e.keyCode == 9)) return; if (base.showing) 
             { base.$label.hide(); base.showing = false; }; base.$field.unbind('keydown.infieldlabel'); }; base.init(); }; $.InFieldLabels.defaultOptions = 
             { fadeOpacity: 0.5, fadeDuration: 300, labelClass: 'infield' }; $.fn.inFieldLabels = function(options) 
             { return this.each(function() 
             { var for_attr = $(this).attr('for'); if (!for_attr) return; var $field = $("input#" + for_attr + "[type='text']," + "input#" + for_attr + "[type='password']," + "input#" + for_attr + "[type='tel']," + "input#" + for_attr + "[type='email']," + "textarea#" + for_attr); if ($field.length == 0) return; (new $.InFieldLabels(this, $field[0], options)); }); }; })(jQuery);


    $("#RegisterUserForm label").inFieldLabels();
});

</script>

<div id="wrapper1">
<div id="registration">
 <h2>Create New Account</h2>

 <form id="RegisterUserForm" action="" method="post">
    <fieldset>
         <p>
            <label for="name">Name</label>
            <input id="name" name="name" type="text" class="text" value="" />
         </p>
         <p>
            <label for="tel">Phone&nbsp;Number</label>
            <input id="tel" name="tel" type="tel" class="text" value="" />
         </p>
         <p>
            <label for="email">Email</label>
            <input id="email" name="email" type="email" class="text" value="" />
         </p>
         <p>
            <label for="password">Password</label>
            <input id="password" name="password" class="text" type="password" />
         </p>   
         <p>
            <button id="registerNew" type="submit">Register</button>
         </p>
    </fieldset>
 </form>

</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript">

        $(document).ready(function() {
/*
* In-Field Label jQuery Plugin
* http://fuelyourcoding.com/scripts/infield.html
*
* Copyright (c) 2009 Doug Neiner
* Dual licensed under the MIT and GPL licenses.
* Uses the same license as jQuery, see:
* http://docs.jquery.com/License
*
* @version 0.1
*/
(function($) { $.InFieldLabels = function(label, field, options) 
             { var base = this; base.$label = $(label); base.$field = $(field); base.$label.data("InFieldLabels", base); base.showing = true; base.init = function() 
             { base.options = $.extend({}, $.InFieldLabels.defaultOptions, options); base.$label.css('position', 'absolute'); var fieldPosition = base.$field.position(); base.$label.css(
             { 'left': fieldPosition.left, 'top': fieldPosition.top }).addClass(base.options.labelClass); if (base.$field.val() != "") { base.$label.hide(); base.showing = false; }; base.$field.focus(function() 
             { base.fadeOnFocus(); }).blur(function() 
             { base.checkForEmpty(true); }).bind('keydown.infieldlabel', function(e) 
             { base.hideOnChange(e); }).change(function(e) 
             { base.checkForEmpty(); }).bind('onPropertyChange', function() 
             { base.checkForEmpty(); }); }; base.fadeOnFocus = function() 
             { if (base.showing) { base.setOpacity(base.options.fadeOpacity); }; }; base.setOpacity = function(opacity) 
             { base.$label.stop().animate(
             { opacity: opacity }, base.options.fadeDuration); base.showing = (opacity > 0.0); }; base.checkForEmpty = function(blur) 
             { if (base.$field.val() == "") 
             { base.prepForShow(); base.setOpacity(blur ? 1.0 : base.options.fadeOpacity); } else 
             { base.setOpacity(0.0); }; }; base.prepForShow = function(e) 
             { if (!base.showing) 
             { base.$label.css(
             { opacity: 0.0 }).show(); base.$field.bind('keydown.infieldlabel', function(e) 
             { base.hideOnChange(e); }); }; }; base.hideOnChange = function(e) 
             { if ((e.keyCode == 16) || (e.keyCode == 9)) return; if (base.showing) 
             { base.$label.hide(); base.showing = false; }; base.$field.unbind('keydown.infieldlabel'); }; base.init(); }; $.InFieldLabels.defaultOptions = 
             { fadeOpacity: 0.5, fadeDuration: 300, labelClass: 'infield' }; $.fn.inFieldLabels = function(options) 
             { return this.each(function() 
             { var for_attr = $(this).attr('for'); if (!for_attr) return; var $field = $("input#" + for_attr + "[type='text']," + "input#" + for_attr + "[type='password']," + "input#" + for_attr + "[type='tel']," + "input#" + for_attr + "[type='email']," + "textarea#" + for_attr); if ($field.length == 0) return; (new $.InFieldLabels(this, $field[0], options)); }); }; })(jQuery);


                                    $("#RegisterUserForm label").inFieldLabels();
                                   });

</script>

和css，stylenew.css

#wrapper1{
    display: inline-block;
    }

body{
    margin: 0;
    float: left;
    }

h1, form, fieldset, input{
    margin: 0;
    padding: 0;
    border: none;
    }

body { font-family: Helvetica, Arial, sans-serif; font-size: 12px; }

#registration {
    color: #fff;
    background: #2d2d2d;
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(60,60,60)),color-stop(0.74, rgb(43,43,43)),color-stop(1, rgb(60,60,60)));
    background: -moz-linear-gradient(center bottom,rgb(60,60,60) 0%,rgb(43,43,43) 74%,rgb(60,60,60) 100%);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    margin: 10px;
    width: 430px;
    }

 #registration a{
    color: #8c910b;
    text-shadow: 0px -1px 0px #000;
    }

#registration fieldset {
    padding: 15px;
    }

input{
    margin: 7px;
    }

input.text {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    border:solid 1px #444;
    font-size: 14px;
    width: 90%;
    padding: 7px 8px 7px 30px;
    -moz-box-shadow: 0px 1px 0px #777;
    -webkit-box-shadow: 0px 1px 0px #777;
    background: no-repeat 4px 5px, -moz-linear-gradient(center bottom,rgb(225,225,225) 0%,rgb(215,215,215) 54%,rgb(173,173,173) 100%);
    background: no-repeat 4px 5px, -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(225,225,225)),color-stop(0.54, rgb(215,215,215)),color-stop(1, rgb(173,173,173)));
    color:#333;
    text-shadow:0px 1px 0px #FFF;
    }     

 input#email { 
    background-position: 4px 5px; 
    background-position: 4px 5px, 0px 0px;
    }

 input#password { 
    background-position: 4px -20px; 
    background-position: 4px -20px, 0px 0px;
    }

 input#name { 
    background-position: 4px -46px; 
    background-position: 4px -46px, 0px 0px; 
    }

 input#tel { 
    background-position: 4px -76px; 
    background-position: 4px -76px, 0px 0px; 
    }

#registration h2 {
    color: #fff;
    text-shadow: 0px -1px 0px #000;
    border-bottom: solid #181818 1px;
    -moz-box-shadow: 0px 1px 0px #3a3a3a;
    text-align: center;
    padding: 18px;
    margin: 0px;
    font-weight: normal;
    font-size: 24px;
    font-family: Lucida Grande, Helvetica, Arial, sans-serif;
    }

#registerNew {
    margin: 10px;
    width: 100px;
    height: 30px;
    border: solid 2px;
    cursor: pointer;
    float: right;
    }

    #registerNew:hover { background-position: 0px -41px; }
    #registerNew:active { background-position: 0px -82px; }

#registration p {
    position: relative;
    }

fieldset label.infield /* .infield label added by JS */ {
    color: #333;
    text-shadow: 0px 1px 0px #fff;
    position: absolute;
    text-align: left;
    top: 3px !important;
    left: 35px !important;
    line-height: 29px;
    }

另外，当我将表单调整为..让我们说float:right,导航栏也会正确。保证金也会中断。我该如何分开这两件事？任何想法？

Answer 1

问题是您在表单中使用<p>。尝试使用<p>替换<br/>，例如：http://jsfiddle.net/dC5dw/1/

所以在这：

<fieldset>
    <p>
        <label for="name">Name</label>
        <input id="name" name="name" type="text" class="text" value="" />
    </p>
    <p>
        <label for="tel">Phone&nbsp;Number</label>
        <input id="tel" name="tel" type="tel" class="text" value="" />
    </p>
    <p>
        <label for="email">Email</label>
        <input id="email" name="email" type="email" class="text" value="" />
    </p>
    <p>
        <label for="password">Password</label>
        <input id="password" name="password" class="text" type="password" />
    </p>
    <p>
        <button id="registerNew" type="submit">Register</button>
    </p>
</fieldset>

它必须像这样

<fieldset>
        <label for="name">Name</label>
        <input id="name" name="name" type="text" class="text" value="" />
    <br/>
        <label for="tel">Phone&nbsp;Number</label>
        <input id="tel" name="tel" type="tel" class="text" value="" />
    <br/>
        <label for="email">Email</label>
        <input id="email" name="email" type="email" class="text" value="" />
    <br/>
        <label for="password">Password</label>
        <input id="password" name="password" class="text" type="password" />
    <br/>
        <button id="registerNew" type="submit">Register</button>
</fieldset>

原因是<p>导致每个输入与其上方的输入重叠。这就是为什么密码工作正常，因为下面没有任何重叠

为什么我不能填写报名表？ css有什么问题吗？

1 个答案: