development

만드는 방법

big-blog 2020. 10. 27. 22:48

만드는 방법 과 HTML 양식에서 같은 줄에 표시됩니까?

웹 사이트 등록 양식을 만들고 있습니다. 각 레이블과 해당 입력 요소가 같은 줄에 나타나기를 원합니다.

내 코드는 다음과 같습니다.

HTML

<div id="form">

 <form action="" method="post" name="registration" class="register">

  <fieldset>

   <label for="Student"> Name: </label>
   <input name="Student" />
   <label for="Matric_no"> Matric number: </label>
   <input name="Matric_no" />
   <label for="Email"> Email: </label>
   <input name="Email" />
   <label for="Username"> Username: </label>
   <input name="Username" />
   <label for="Password"> Password: </label>
   <input name="Password" type="password" />

   <input name="regbutton" type="button" class="button" value="Register" />
  </fieldset>

 </form>
</div>

CSS

#form {
 background-color: #FFF;
 height: 600px;
 width: 600px;
 margin-right: auto;
 margin-left: auto;
 margin-top: 0px;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 padding: 0px;
}

label {
 font-family: Georgia, "Times New Roman", Times, serif;
 font-size: 18px;
 color: #333;
 height: 20px;
 width: 200px;
 margin-top: 10px;
 margin-left: 10px;
 text-align: right;
 clear: both;
}

input {
 height: 20px;
 width: 300px;
 border: 1px solid #000;
 margin-top: 10px;
 float: left;
}

요소를 플로팅하려는 경우 label요소도 플로팅해야 합니다.

다음과 같이 작동합니다.

label {
    /* Other styling... */
    text-align: right;
    clear: both;
    float:left;
    margin-right:15px;
}

#form {
    background-color: #FFF;
    height: 600px;
    width: 600px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 0px;
    text-align:center;
}
label {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    color: #333;
    height: 20px;
    width: 200px;
    margin-top: 10px;
    margin-left: 10px;
    text-align: right;
    clear: both;
    float:left;
    margin-right:15px;
}
input {
    height: 20px;
    width: 300px;
    border: 1px solid #000;
    margin-top: 10px;
    float: left;
}
input[type=button] {
    float:none;
}

<div id="form">
    <form action="" method="post" name="registration" class="register">
        <fieldset>
            <label for="Student">Name:</label>
            <input name="Student" id="Student" />
            <label for="Matric_no">Matric number:</label>
            <input name="Matric_no" id="Matric_no" />
            <label for="Email">Email:</label>
            <input name="Email" id="Email" />
            <label for="Username">Username:</label>
            <input name="Username" id="Username" />
            <label for="Password">Password:</label>
            <input name="Password" id="Password" type="password" />
            <input name="regbutton" type="button" class="button" value="Register" />
        </fieldset>
    </form>
</div>

또는 더 일반적인 방법은 input/ label요소를 그룹 으로 래핑하는 것입니다 .

<div class="form-group">
    <label for="Student">Name:</label>
    <input name="Student" id="Student" />
</div>

#form {
    background-color: #FFF;
    height: 600px;
    width: 600px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 0px;
    text-align:center;
}
label {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    color: #333;
    height: 20px;
    width: 200px;
    margin-top: 10px;
    margin-left: 10px;
    text-align: right;
    margin-right:15px;
    float:left;
}
input {
    height: 20px;
    width: 300px;
    border: 1px solid #000;
    margin-top: 10px;
}

<div id="form">
    <form action="" method="post" name="registration" class="register">
        <fieldset>
            <div class="form-group">
                <label for="Student">Name:</label>
                <input name="Student" id="Student" />
            </div>
            <div class="form-group">
                <label for="Matric_no">Matric number:</label>
                <input name="Matric_no" id="Matric_no" />
            </div>
            <div class="form-group">
                <label for="Email">Email:</label>
                <input name="Email" id="Email" />
            </div>
            <div class="form-group">
                <label for="Username">Username:</label>
                <input name="Username" id="Username" />
            </div>
            <div class="form-group">
                <label for="Password">Password:</label>
                <input name="Password" id="Password" type="password" />
            </div>
            <input name="regbutton" type="button" class="button" value="Register" />
        </fieldset>
    </form>
</div>

점을 유의 for속성이 받는 일치해야 id하는 labelable 요소의하지 그것 name. 그러면 사용자가를 클릭 label하여 해당 양식 요소에 초점을 맞출 수 있습니다.

aaa ## HTML 특정 컨텍스트에서 플로팅 할 가능성이 높으므로 div로 래핑하는 것이 좋습니다.

<div class="input-w">
    <label for="your-input">Your label</label>
    <input type="text" id="your-input" />
</div>

CSS

그런 다음 해당 div 내에서 각 조각을 만들어 중앙에 inline-block사용 vertical-align하거나 기준선 등을 설정할 수 있습니다 (라벨 및 입력은 나중에 크기가 변경 될 수 있습니다.

.input-w label, .input-w input {
    float: none; /* if you had floats before? otherwise inline-block will behave differently */
    display: inline-block;
    vertical-align: middle;    
}

jsFiddle

업데이트 : 2016 년 중반 + 모바일 우선 미디어 쿼리 및 플렉스 박스 포함

이것이 내가 요즘 일하는 방식입니다.

HTML

<label class='input-w' for='this-input-name'>
  <span class='label'>Your label</span>
  <input class='input' type='text' id='this-input-name' placeholder='hello'>
</label>

<label class='input-w' for='this-other-input-name'>
  <span class='label'>Your label</span>
  <input class='input' type='text' id='this-other-input-name' placeholder='again'>
</label>

SCSS

html { // https://www.paulirish.com/2012/box-sizing-border-box-ftw/
  box-sizing: border-box;
  *, *:before, *:after {
    box-sizing: inherit;
  }
} // if you don't already reset your box-model, read about it

.input-w {
  display: block;
  width: 100%; // should be contained by a form or something
  margin-bottom: 1rem;
  @media (min-width: 500px) {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .label, .input {
    display: block;
    width: 100%;
    border: 1px solid rgba(0,0,0,.1);
    @media (min-width: 500px) {
      width: auto;
      display: flex;
    }
  }
  .label {
    font-size: 13px;
    @media (min-width: 500px) {
      /* margin-right: 1rem; */
      min-width: 100px; // maybe to match many?
    }
  }
  .input {
    padding: .5rem;
    font-size: 16px;
    @media (min-width: 500px) {
      flex-grow: 1;
      max-width: 450px; // arbitrary
    }
  }
}

jsFiddle

"display:flex"스타일은 이러한 요소를 동일한 라인으로 만드는 좋은 방법이라는 것을 알았 습니다. div의 어떤 종류의 요소 든 상관 없습니다. 특히 입력 클래스가 양식 제어 인 경우 부트 스트랩, 인라인 블록과 같은 다른 솔루션이 제대로 작동하지 않습니다.

예:

<div style="display:flex; flex-direction: row; justify-content: center; align-items: center">
    <label for="Student">Name:</label>
    <input name="Student" />
</div>

display : flex에 대한 자세한 정보 :

플렉스 방향 : 행, 열

justify-content : flex-end, center, space-between, space-around

align-items : stretch, flex-start, flex-end, center

당신이 놓친 것은 float : left; 다음은 HTML에서 방금 수행 한 예제입니다.

<div id="form">
<form action="" method="post" name="registration" class="register">
    <fieldset>
        <label for="Student" style="float: left">Name:</label>
        <input name="Student" />
        <label for="Matric_no" style="float: left">Matric number:</label>
        <input name="Matric_no" />
        <label for="Email" style="float: left">Email:</label>
        <input name="Email" />
        <label for="Username" style="float: left">Username:</label>
        <input name="Username" />
        <label for="Password" style="float: left">Password:</label>
        <input name="Password" type="password" />
        <input name="regbutton" type="button" class="button" value="Register" />
    </fieldset>
</form>

이를 수행하는보다 효율적인 방법은 레이블에 클래스를 추가하고 float를 설정하는 것입니다. left; CSS의 클래스에

다른 사람들이 제안한 것처럼 float를 사용하는 것 외에도 "horizontal-form"클래스를 사용하여 동일한 줄에 레이블과 입력을 가질 수있는 Bootstrap 과 같은 프레임 워크 를 사용할 수도 있습니다.

Bootstrap에 익숙하지 않은 경우 다음을 포함해야합니다.

받는 링크 부트 스트랩 CSS (그것이 말하는 상단 링크 <- 최신 컴파일 및 축소 된 CSS는 ->) , 머리뿐만 아니라 몇 가지 div의 추가 :
div class = "form-group"
div class = "col -..."
함께 클래스 = "COL-SM-2 제어 라벨" I 아래 포함 부트 스트랩 프로그램, 각 라벨.
또한 버튼을 다시 포맷하여 Bootstrap을 준수합니다.
필드 세트를 사용하고 있었기 때문에 양식 상자에 범례를 추가했습니다.

매우 간단하며 위에 나열한대로 서식 지정을 위해 부동 소수점이나 CSS를 많이 사용하지 않아도됩니다.

  <div id="form">
    <div class="row">
      <form action="" method="post" name="registration" class="register form-horizontal">
        <fieldset>
        <legend>Address Form</legend>

      <div class="form-group">
        <label for="Student" class="col-sm-2 control-label">Name:</label>
          <div class="col-sm-6">
            <input name="Student" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Matric_no" class="col-sm-2 control-label">Matric number: </label>
          <div class="col-sm-6">
            <input name="Matric_no" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Email" class="col-sm-2 control-label">Email: </label>
          <div class="col-sm-6">
            <input name="Email" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Username" class="col-sm-2 control-label">Username: </label>
          <div class="col-sm-6">
            <input name="Username" class="form-control">
          </div>
      </div>

      <div class="form-group">
        <label for="Password" class="col-sm-2 control-label">Password: </label>
          <div class="col-sm-6">
            <input name="Password" type="password" class="form-control">
          </div>
      </div>

      <div>
        <button class="btn btn-info" name="regbutton" value="Register">Submit</button>
      </div>

      </fieldset>
    </form>
    </div>
  </div>
</div>

레이블과 입력을 부트 스트랩 div 내에서 래핑합니다.

<div class ="row">
  <div class="col-md-4">Name:</div>
  <div class="col-md-8"><input type="text"></div>
</div>

Bootstrap 4의 경우 다음과 같이 할 수 있습니다. class="form-group" style="display: flex"

<div class="form-group" style="display: flex">
    <label>Topjava comment:</label>
    <input class="form-control" type="checkbox"/>
</div>

여러 가지 방법으로이 작업을 수행했지만 레이블과 해당 텍스트 / 입력 데이터를 같은 줄에 유지하고 항상 부모의 너비에 완벽하게 래핑하는 유일한 방법은 display : inline 테이블을 사용하는 것입니다.

CSS

.container {
  display: inline-table;
  padding-right: 14px;
  margin-top:5px;
  margin-bottom:5px;
}
.fieldName {
  display: table-cell;
  vertical-align: middle;
  padding-right: 4px;
}
.data {
  display: table-cell;
}

HTML

<div class='container'>
    <div class='fieldName'>
        <label>Student</label>
    </div>
    <div class='data'>
        <input name="Student" />
    </div>
</div>
<div class='container'>
    <div class='fieldName'>
        <label>Email</label>
    </div>
    <div class='data'>
      <input name="Email" />
    </div>
</div>

#form {
    background-color: #FFF;
    height: 600px;
    width: 600px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 0px;
    text-align:center;
}
label {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    color: #333;
    height: 20px;
    width: 200px;
    margin-top: 10px;
    margin-left: 10px;
    text-align: right;
    margin-right:15px;
    float:left;
}
input {
    height: 20px;
    width: 300px;
    border: 1px solid #000;
    margin-top: 10px;
}

<div id="form">
    <form action="" method="post" name="registration" class="register">
        <fieldset>
            <div class="form-group">
                <label for="Student">Name:</label>
                <input name="Student" />
            </div>
            <div class="form-group">
                <label for="Matric_no">Matric number:</label>
                <input name="Matric_no" />
            </div>
            <div class="form-group">
                <label for="Email">Email:</label>
                <input name="Email" />
            </div>
            <div class="form-group">
                <label for="Username">Username:</label>
                <input name="Username" />
            </div>
            <div class="form-group">
                <label for="Password">Password:</label>
                <input name="Password" type="password" />
            </div>
            <input name="regbutton" type="button" class="button" value="Register" />
        </fieldset>
    </form>
</div>

Angular 6을 Bootstrap 4와 함께 사용하고 있으며 다음과 같이 작동합니다.

<div class="form-group row">
    <div class="col-md-2">
        <label for="currentPassword">Current Password:</label>
    </div>
    <div class="col-md-6">
        <input type="password" id="currentPassword">
    </div>
</div>

또 다른 옵션은 양식 내부에 테이블을 배치하는 것입니다. (아래 참조) 일부 사람들은 테이블이 눈살을 찌푸리는 것을 알고 있지만 반응 형 양식 레이아웃과 관련하여 잘 작동한다고 생각합니다.

<FORM METHOD="POST" ACTION="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi">
<TABLE BORDER="1">
  <TR>
    <TD>Your name</TD>
    <TD>
      <INPUT TYPE="TEXT" NAME="name" SIZE="20">
    </TD>
  </TR>
  <TR>
    <TD>Your E-mail address</TD>
    <TD><INPUT TYPE="TEXT" NAME="email" SIZE="25"></TD>
  </TR>
</TABLE>
<P><INPUT TYPE="SUBMIT" VALUE="Submit" NAME="B1"></P>
</FORM>

참고URL : https://stackoverflow.com/questions/23530064/how-to-make-label-and-input-appear-on-the-same-line-on-an-html-form

'development' 카테고리의 다른 글

TypeScript 맵 파일이란 무엇입니까? (0)	2020.10.27
/ etc / hosts에 와일드 카드 항목을 넣는 방법은 무엇입니까? (0)	2020.10.27
find 명령에 대한 exec 매개 변수에서 파이프를 어떻게 사용합니까? (0)	2020.10.27
O (N log N) 복잡성-선형과 유사합니까? (0)	2020.10.27
PHP에서 정적 변수 / 함수를 언제 사용합니까? (0)	2020.10.27

현재글만드는 방법

big-blog

만드는 방법

만드는 방법 과 HTML 양식에서 같은 줄에 표시됩니까?

CSS

업데이트 : 2016 년 중반 + 모바일 우선 미디어 쿼리 및 플렉스 박스 포함

HTML

SCSS

'development' 카테고리의 다른 글

'development'의 다른글

티스토리툴바

만드는 방법

만드는 방법 과 HTML 양식에서 같은 줄에 표시됩니까?

CSS

업데이트 : 2016 년 중반 + 모바일 우선 미디어 쿼리 및 플렉스 박스 포함

HTML

SCSS

'development' 카테고리의 다른 글

'development'의 다른글

관련글

티스토리툴바