Formular Umsetzung mit Bootstrap

Question

Ich mag würde eine Form wie das Bild unten entwickelt haben:

ich mit dem folgenden Code versucht:

<form> 

      <div class="form-group form-inline"> 
      <label for="exampleInputPassword1">Navn:</label> 
      <input type="text" class="form-control" id="exampleInputPassword1" placeholder="" data-required="true" name="navn"> 
      </div> 

      <div class="form-group form-inline"> 
      <label for="exampleInputPassword1">Bedrift:</label> 
      <input type="text" class="form-control" id="exampleInputPassword1" placeholder="" data-required="true" name="bedrift"> 
      </div> 


      <div class="form-group form-inline"> 
      <label for="exampleInputPassword1" class>Tlf:</label> 
      <input type="text" class="form-control" id="exampleInputPassword1" placeholder="" data-required="true" name="tlf"> 
      </div> 

      <div class="form-group form-inline"> 
      <label for="exampleInputEmail1">Mailadresse:</label> 
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="" data-required="true" name="mailadresse"> 
      </div> 

      <input id="input-region" type="hidden" name="region" value=""> 
      <button type="submit" class="btn btn-primary">Send</button> 
     </form> 

Aber das Ergebnis ist nicht das, was ich erwartet hatte.

Ich lege die Etiketten und die Eingabe auf eine weiße Box, ohne das Etikett als Platzhalter zu verwenden.

Answer 1

Sie möchten die Platzhalterfunktion verwenden, denke ich?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<form> 
 

 
      <div class="form-group form-inline"> 
 
      <label for="exampleInputPassword1" class="sr-only">Navn:</label> 
 
      <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Navn:" data-required="true" name="navn"> 
 
      </div> 
 

 
      <div class="form-group form-inline"> 
 
      <label for="exampleInputPassword1" class="sr-only">Bedrift:</label> 
 
      <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Bedrift:" data-required="true" name="bedrift"> 
 
      </div> 
 

 

 
      <div class="form-group form-inline"> 
 
      <label for="exampleInputPassword1" class="sr-only"></label> 
 
      <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Tlf:" data-required="true" name="tlf"> 
 
      </div> 
 

 
      <div class="form-group form-inline"> 
 
      <label for="exampleInputEmail1" class="sr-only"></label> 
 
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Mailadresse:" data-required="true" name="mailadresse"> 
 
      </div> 
 

 
      <input id="input-region" type="hidden" name="region" value=""> 
 
      <button type="submit" class="btn btn-primary">Send</button> 
 
     </form>

Answer 2

Sie können

body { 
 
    background: blue; 
 
} 
 
input { 
 
    margin: 5px; 
 
    margin-left: 20px; 
 
} 
 
form { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 500px; 
 
} 
 
button { 
 
    align-self:center; 
 
    width:100px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<form> 
 

 
    <div class="form-group form-inline"> 
 

 
    <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Navn:" data-required="true" name="navn"> 
 
    </div> 
 

 
    <div class="form-group form-inline"> 
 

 
    <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Bedrift:" data-required="true" name="bedrift"> 
 
    </div> 
 

 

 
    <div class="form-group form-inline"> 
 
    <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Tlf:" data-required="true" name="tlf"> 
 
    </div> 
 

 
    <div class="form-group form-inline"> 
 

 
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Mailadresse" data-required="true" name="mailadresse"> 
 
    </div> 
 

 
    <input id="input-region" type="hidden" name="region" value=""> 
 
    <button type="submit" class="btn btn-primary">Send</button> 
 
</form>

Hoffnung Verwendung von Platzhalter-Funktion

Überprüfung dieser Ausschnitt machen, das hilft