2017-12-27 6 views
0

Tor zum Typ: Ich habe eine Form zu machen versuchen, Benutzer ihre Schule ZeitplanEs kann keine Antwort in einem <input> Tag

Problem einreichen: die erste meinen Eingang-Tags läßt mich einen Eingang nicht geben. Alle Eingabeabschnitte sind so eingerichtet, dass sie denselben Platzhaltertext akzeptieren. Sie folgen alle dem gleichen Muster und haben die gleichen Klassen angewendet.

Hinweise: Ich weiß, dass Sie das Eingabefeld innerhalb des Snippets eingeben können, aber es funktioniert nicht, wenn es in meine vollständige Webseite implementiert wird. Ich bin auch ziemlich neu in HTML/CSS, also entschuldige die Tatsache, dass mein Code irgendwie unordentlich ist. Jede konstruktive Kritik wird offen akzeptiert.

.form { 
 
    width: 680px; 
 
    height: 870px; 
 
} 
 

 
.inputConatiner { 
 
    height: 75px; 
 
    width: 680px; 
 
    display: inline-block; 
 
    float: left; 
 
} 
 

 
.textContainer { 
 
    height: 75px; 
 
    width: 405px; 
 
    display: inline-block; 
 
} 
 

 
.submitContainer { 
 
    width: 100%; 
 
    height: 40px; 
 
    position: relative; 
 
} 
 

 
.submit { 
 
    height: 40px; 
 
    width: 150px; 
 
    display: inline-block; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 2075%; 
 
    margin: 0 0 0 -75px; 
 
} 
 

 
input[type="text"] { 
 
    border: black 0px solid; 
 
    border-radius: 20px; 
 
    background-color: rgb(230, 230, 230); 
 
    padding-top: 13px; 
 
    padding-bottom: 13px; 
 
    font-family: "Arial"; 
 
} 
 

 
input[type="radio"] { 
 
    height: 30px; 
 
    width: 30px; 
 
    margin: 0; 
 
    vertical-align: middle; 
 
} 
 

 
input[type="submit"] { 
 
    height: 40px; 
 
    width: 150px; 
 
    border: black 0px solid; 
 
    border-radius: 20px; 
 
} 
 

 
label[for="A"], 
 
label[for="B"] { 
 
    display: inline-block; 
 
    width: 160px; 
 
    font-family: "Arial"; 
 
} 
 

 
fieldset { 
 
    border: black 0px solid; 
 
    padding: 0px; 
 
} 
 

 
.label { 
 
    width: 270px; 
 
    height: 40px; 
 
    font-family: "Nunito Sans"; 
 
    font-size: 30px; 
 
    display: inline-block; 
 
    background-color: rgb(104, 255, 144); 
 
    border-radius: 20px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 

 
input { 
 
    width: 200px; 
 
}
\t <head> 
 
\t \t <title>Side Project</title> 
 
\t \t <link rel="stylesheet" type="text/css" href="css/styles.css"> 
 
\t \t <link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet"> 
 
\t </head> 
 
<div class="form"> 
 
    <form method="post" action="#" name="getStudentInfo"> 
 
    <div class="inputConatiner"> 
 
     <h1 class="label">Enter Your Name</h1> 
 
     <div class="textContainer"> 
 
     <input type="text" placeholder="First" required /> 
 
     <input type="text" placeholder="Last" required /> 
 
     </div> 
 
    </div> 
 
    <div class="inputConatiner"> 
 
     <h1 class="label">1A Class</h1> 
 
     <div class="textContainer"> 
 
     <input type="text" placeholder="Class" required /> 
 
     <input type="text" placeholder="Teacher" required /> 
 
     </div> 
 
    </div> 
 
    <div class="inputConatiner"> 
 
     <h1 class="label">2A Class</h1> 
 
     <div class="textContainer"> 
 
     <input type="text" placeholder="Class" required /> 
 
     <input type="text" placeholder="Teacher" required /> 
 
     </div> 
 
    </div> 
 
    <div class="inputConatiner"> 
 
     <h1 class="label">3A Class</h1> 
 
     <div class="textContainer"> 
 
     <input type="text" placeholder="Class" required /> 
 
     <input type="text" placeholder="Teacher" required /> 
 
     </div> 
 
    </div> 
 
    <div class="inputConatiner"> 
 
     <h1 class="label">4A Class</h1> 
 
     <div class="textContainer"> 
 
     <input type="text" placeholder="Class" required /> 
 
     <input type="text" placeholder="Teacher" required /> 
 
     </div> 
 
    </div> 
 
    <div class="inputConatiner"> 
 
     <h1 class="label">A Day Lunch</h1> 
 
     <input type="radio" id="A" name="lunchADay" /> 
 
     <label for="A">First Lunch</label> 
 
     <input type="radio" id="B" name="lunchADay" /> 
 
     <label for="B">Second Lunch</label> 
 
    </div> 
 
    <div class="inputConatiner"> 
 
     <h1 class="label">1B Class</h1> 
 
     <div class="textContainer"> 
 
     <input type="text" placeholder="Class" required /> 
 
     <input type="text" placeholder="Teacher" required /> 
 
     </div> 
 
    </div> 
 
    <div class="inputConatiner"> 
 
     <h1 class="label">2B Class</h1> 
 
     <div class="textContainer"> 
 
     <input type="text" placeholder="Class" required /> 
 
     <input type="text" placeholder="Teacher" required /> 
 
     </div> 
 
    </div> 
 
    <div class="inputConatiner"> 
 
     <h1 class="label">3B Class</h1> 
 
     <div class="textContainer"> 
 
     <input type="text" placeholder="Class" required /> 
 
     <input type="text" placeholder="Teacher" required /> 
 
     </div> 
 
    </div> 
 
    <div class="inputConatiner"> 
 
     <h1 class="label">4B Class</h1> 
 
     <div class="textContainer"> 
 
     <input type="text" placeholder="Class" required /> 
 
     <input type="text" placeholder="Teacher" required /> 
 
     </div> 
 
    </div> 
 
    <div class="inputConatiner"> 
 
     <h1 class="label">B Day Lunch</h1> 
 
     <input type="radio" id="A" name="lunchBDay" /> 
 
     <label for="A">First Lunch</label> 
 
     <input type="radio" id="B" name="lunchBDay" /> 
 
     <label for="B">Second Lunch</label> 
 
    </div> 
 
    <div class="submitContainer"> 
 
     <div class="submit"> 
 
     <input type="submit" placeholder="Submit" /> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div>

+0

Ich kann auf die Eingabefelder tippen ... Überprüfen Sie es, indem Sie das Snippet ausführen –

Antwort

0

Sie haben die Zeilenelemente schwebten aber nicht gelöscht. Das Containerelement der Übermittlungsschaltfläche befindet sich daher oben auf der Seite und überschneidet sich teilweise mit den Zeilen, obwohl die Schaltfläche selbst nach unten verschoben wurde (mithilfe der absoluten Positionierung).

Statt dies zu tun, müssen Sie zuerst die Floats klar mit .submitContainer und zu zentrieren, die Taste in ihm:

.submitContainer { 
    width: 100%; 
    height: 40px; 
    position: relative; 
    /* CLEAR THE FLOATED ROWS */ 
    clear: both; 
    /* CENTER-ALIGN THE CONTENTS OF THIS CONTAINER */ 
    text-align: center; 
} 

Als nächstes entfernen Sie die absolute Positionierung der .submit Element selbst, sowie die negative Marge (da es nun von seinem Behälter ausgerichtet wird):

.submit { 
    height: 40px; 
    width: 150px; 
    display: inline-block; 
    /* position: absolute; <- REMOVE THIS */ 
    /* left: 50%; <- REMOVE THIS */ 
    /* top: 2075%; <- REMOVE THIS */ 
    /* margin: 0 0 0 -75px; <- REMOVE THIS */ 
} 

dass der Behälter vorlegen kann und Knopf unter dem Formular sitzen, ohne es herunterdrücken zu müssen.

0

Das Problem ist, dass Ihr Wrapper div für Submit-Button den ersten Eingang überlappt. Da Sie in allen Ihren Eingängen float: left verwendet haben, versuchen Sie und enthalten Sie alle in einem div Tag.

Fügen Sie diese in Ihrem css

.clearfix::after { 
    content: ""; 
    clear: both; 
    display: table; 
} 

und wickeln Sie Ihre Eingaben wie

<form method="post" action="#" name="getStudentInfo"> 
    <div class="clearfix"> 
     <div class="inputConatiner"> 
      ... 
     </div> 
     <div class="inputConatiner"> 
      ... 
     </div> 
     <div class="inputConatiner"> 
      ... 
     </div> 
     <div class="inputConatiner"> 
      ... 
     </div> 
     <div class="inputConatiner"> 
      ... 
     </div> 
     <div class="inputConatiner"> 
      ... 
     </div> 
     <div class="inputConatiner"> 
      ... 
     </div> 
    <div class="submitContainer"> 
     <div class="submit"> 
      <input type="submit" placeholder="Submit" /> 
     </div> 
    </div> 
</form> 
0

mir zu sagen, dass Ihre CSS und Container Arbeit Tag braucht mehr Arbeits ... Ihr erster Eingang Beginnen wir Ich habe dich nicht tippen lassen, da der "submitcontainer" die Input-Tags überlappt ... Ich habe den Submit-Container entfernt und den Submit-Button leicht positioniert ... Aber ich flehe dich an, etwas Styling zu lernen und nicht abhängig von absoluten Positionen ...

<div class="submit"> 
     <input type="submit" placeholder="Submit" /> 
</div> 

.submit { 
    height: 40px; 
    width: 150px; 
    display: inline-block; 
    position: absolute; 
    left: 30%; 
    top: 100%; 
    margin: 0 0 0 -75px; 
} 

Codepen Link:https://codepen.io/anon/pen/MrJGrN

Verwandte Themen