入力内のラベル

Question

入力フォーム内にフォームラベルを入れるにはどうすればよいですか？

例：

私のコード：

<form> 
    <div class="form-group"> 
     <label class="form-control-label" for="firstName">Firstname</label> 
     <input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required /> 
    </div> 
    <div class="form-group"> 
     <label class="form-control-label" for="lastName">Lastname</label> 
     <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required /> 
    </div> 

    <div class="form-group"> 
     <label class="form-control-label" for="phone_number">Mobile Number</label> 
     <input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10"required pattern="0[689]?[0-9]{8}" /> 
    </div> 
</form> 

Answer 1

このような何か？私は、HTMLあなたは、以下の方法のように使用することができます

.form-group { 
 
    position: relative; 
 
    min-height: 3.5em; 
 
} 
 

 
input.form-control { 
 
    height: 3em; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
label.form-control-label { 
 
    position: absolute; 
 
    font-size: .8em; 
 
    top: 0; 
 
    left: 5px; 
 
    text-transform: uppercase; 
 
}

<form> 
 
    <div class="form-group"> 
 
    <input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required /> 
 
    <label class="form-control-label" for="firstName">Firstname</label> 
 
    </div> 
 
    <div class="form-group"> 
 
    <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required /> 
 
    <label class="form-control-label" for="lastName">Lastname</label> 
 
    </div> 
 
    <div class="form-group"> 
 
    <input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10" required pattern="0[689]?[0-9]{8}" /> 
 
    <label class="form-control-label" for="phone_number">Mobile Number</label> 
 
    </div> 
 
</form>

Answer 2

にinputとlabelの位置を変更しました。私たちは、メディアにして携帯電話の画面のスタイルを記述する必要が

body{ 
 
font-family:arial; 
 
} 
 
.form-group{ 
 
position:relative; 
 
} 
 
.input-element{ 
 
padding:30px 5px 5px 5px; 
 
width:100%; 
 
border:1px solid #CCC; 
 
} 
 

 
@media screen and (max-width: 767px) { 
 
.label-element{ 
 
position:absolute; 
 
top:5px; 
 
left:5px; 
 
font-size:12px; 
 
color:#666; 
 

 
} 
 
}

<div class="form-group"><label class="label-element">First Name</label> 
 
<input type="text" class="input-element"/></div>

Answer 3

を照会し、私はちょうどform-groupに境界線を追加し、いくつかのブートストラップコードを上書きしてしまいました。

モバイルの場合は、CSS3 Media Queriesを試してみてください。

あなたはこの試みることができる：

.form-group { 
 
    border: 1px solid black; /* Change border width and color here */ 
 
} 
 

 
/* the !important declaration is for this snippet, because this snippet include bootstrap after this declarations **/ 
 
.form-control { 
 
    border: none !important; /* No border for input */ 
 
    box-shadow: none !important; /* No border for input */ 
 
} 
 

 
.form-control:focus { 
 
    box-shadow: none !important; /* Remove the blue shining at focus */ 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<form> 
 
    <div class="form-group"> 
 
    <label class="form-control-label" for="firstName">Firstname</label> 
 
    <input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required /> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label class="form-control-label" for="lastName">Lastname</label> 
 
    <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required /> 
 
    </div> 
 

 
    <div class="form-group"> 
 
    <label class="form-control-label" for="phone_number">Mobile Number</label> 
 
    <input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10" required pattern="0[689]?[0-9]{8}" /> 
 
    </div> 
 
</form>