HTML에서 입력 양식을 정렬하는 방법

117

저는 HTML을 처음 사용하고 양식 사용 방법을 배우려고합니다.

지금까지 내가 겪고있는 가장 큰 문제는 양식을 정렬하는 것입니다. 다음은 현재 HTML 파일의 예입니다.

<form>
 First Name:<input type="text" name="first"><br />
 Last Name:<input type="text" name="last"><br />
 Email:<input type="text" name="email"><br />
</form>

문제는 '이메일'뒤의 입력란 상자가 성과 이름에 비해 간격이 크게 다르다는 것입니다. 본질적으로 '라인업'하도록 만드는 '적절한'방법은 무엇입니까?

좋은 형식과 구문을 연습하려고합니다. 많은 사람들이 CSS를 사용하여이 작업을 수행 할 수 있습니다. 잘 모르겠습니다. 지금까지 HTML의 기본 만 배웠습니다.

html forms alignment

— Yoshyosh
소스

테이블 (아마도), 질문에 대한 답변이 예외가 아닌 경우, 중간 지점 이음새가 <tables>가 테이블 형식 데이터를위한 것입니다. 자세한 내용은 stackoverflow.com/questions/83073을

— Trufa

정확히 같은 질문이지만 답변은 W3C의 인용과 함께 <table> 태그를 사용하는 것을 제안합니다. stackoverflow.com/questions/4707332

— Bossliaw

62

또 다른 예는 CSS를 사용하며 컨테이너 클래스가있는 div에 양식을 넣습니다. 내부에 포함 된 입력 요소가 컨테이너 너비의 100 %가되도록 지정하고 양쪽에 요소가 없도록 지정합니다.

.container {
  width: 500px;
  clear: both;
}

.container input {
  width: 100%;
  clear: both;
}

<html>

<head>
  <title>Example form</title>
</head>

<body>
  <div class="container">
    <form>
      <label>First Name</label>
      <input type="text" name="first"><br />
      <label>Last Name</label>
      <input type="text" name="last"><br />
      <label>Email</label>
      <input type="text" name="email"><br />
    </form>
  </div>
</body>

</html>

스 니펫 확장

— 시리얼
소스

2

완벽 해요, 그냥 저를 엉망으로 만들었습니다.

— null

또한 내 "제출"버튼을 컨테이너 너비로 확장하고 있습니다.

— Saurabh Rana

4

이 솔루션은 작동하지 않는 것 같습니다. 입력 요소는 왼쪽 정렬되지 않습니다. 아래 표 솔루션이 작동합니다.

— johny 왜

1

나는 당신이 하나없이 할 수있을 때 명시적인 너비를 설정하는 것을 좋아하지 않습니다 ( 아래 답변 참조)

— Clément

1

이것은 라디오 버튼에 이상한 결과를 제공합니다. 라디오 버튼 레이블은 실제 라디오 버튼 뒤에 줄을 표시합니다.

— wordsforthewise

134

허용되는 답변 (명시적인 너비 (픽셀 단위) 설정)은 변경하기 어렵고 사용자가 다른 글꼴 크기를 사용하면 깨집니다. 반면에 CSS 테이블을 사용하면 훌륭하게 작동합니다.

form  { display: table;      }
p     { display: table-row;  }
label { display: table-cell; }
input { display: table-cell; }

<form>
  <p>
    <label for="a">Short label:</label>
    <input id="a" type="text">
  </p>
  <p>
    <label for="b">Very very very long label:</label>
    <input id="b" type="text">
  </p>
</form>

스 니펫 확장

다음은 JSFiddle입니다. http://jsfiddle.net/DaS39/1/

레이블이 오른쪽 정렬이 필요한 경우 레이블에 추가 text-align: right하십시오. http://jsfiddle.net/DaS39/

편집 : 한 가지 더 빠른 참고 : CSS 테이블을 사용하면 열을 사용할 수도 있습니다. 예를 들어 입력 필드가 가능한 한 많은 공간을 차지하도록하려면 양식에 다음을 추가 할 수 있습니다.

<div style="display: table-column;"></div>
<div style="display: table-column; width:100%;"></div>

당신은 추가 할 수 있습니다 white-space: nowrap받는 labels경우에.

— 온화한
소스

4

이 솔루션이 마음에 듭니다. 즉, 페이지가 개발을 통해 발전함에 따라 필연적으로 너비가 변경되는 열에 대해 걱정할 필요가 없습니다. +1

— Tom Lord

9

@MuhammadUmer 테이블은 화면 판독기와 많은 보조 장치를 혼동하는 반면 CSS 테이블은 프레젠테이션과 콘텐츠를 분리하기 때문입니다. 따라서 양식은 화면 판독기 또는 읽기 도우미에서 쉽게 구문 분석 할 수 있지만 멋지게 표시됩니다.

— Clément

3

음, 레이블을 td에 맞추면 차트와 같이 조직화 된 테이블 형식 데이터의 일부임을 알 수 있습니다. 여기서는 그렇지 않습니다. 또한 HTML 표를 사용하면 나중에 레이아웃을 변경하거나 다양한 화면 크기에 맞게 조정하기가 더 어려워집니다 (휴대폰 및 태블릿 등).

— Clément

4

나는 오늘까지 @MuhammadUmer가 만든 것과 동일한 인수로 CSS 테이블 구조에 강하게 저항 해 왔습니다! 나는 그것을 시도하고 마침내 전환의 가치를 확인하기로 결정했습니다! 또한, 자사의 CSS, 그래서 장기적으로 쉽게 일을하게

— BillyNair

2

이 솔루션으로 열을 어떻게 확장 할 수 있습니까? 제출 버튼을 가운데 정렬하기 위해.

— eugenekr

31

HTML을 처음 사용하는 경우 간단한 해결책은 표를 사용하여 모든 것을 정렬하는 것입니다.

<form>
  <table>
    <tr>
      <td align="right">First Name:</td>
      <td align="left"><input type="text" name="first" /></td>
    </tr>
    <tr>
      <td align="right">Last Name:</td>
      <td align="left"><input type="text" name="last" /></td>
    </tr>
    <tr>
      <td align="right">Email:</td>
      <td align="left"><input type="text" name="email" /></td>
    </tr>
  </table>
</form>

— Amonett
소스

43

빠르고 간단한 솔루션. 점심 시간 동안 종교적인 CSS 토론을 떠나서 일을 끝내십시오.

— Emmanuel Bourg

3

@ClarkeyBoy-그 일을하는 한 누가 신경 쓰는지.

— SolidSnake 2013

1

@ClarkeyBoy-가장 무식한 댓글? ㅋㅋㅋ 난 여기서 너랑 말다툼하고 싶지 않아 ..하고 싶다면 divs 방식으로 해. 당신이 그것을하고 싶다면 테이블 방식으로 당신에게 달려 있습니다. 그러나 모든 고객이나 사람들이 그것에 대해 관심을 가질 것이라고 가정하지 마십시오. 그들 대부분은 일을 끝내는 데 관심이 있습니다.

— SolidSnake

2

- @ClarkeyBoy 할 일이 대답하고, W3C에서 게시물 읽기 stackoverflow.com/a/4707368/40411

— J. Polfer을

6

@EmmanuelBourg : 이것이 바로 CSS 테이블의 의미가 아닙니까? 스크린 리더를 혼동하지 않고 표와 같은 레이아웃을 달성 하시겠습니까? OP가 요구하는 레이아웃은 실제로 CSS 테이블을 사용하여 쉽게 달성 할 수 있습니다 ( 아래 참조 )

— Clément

17

레이블 표시를 인라인 블록으로 변경하고 너비를 설정하는 것이 훨씬 더 쉽습니다.

label {
    display: inline-block;
    width:100px;
    text-align: right;
}

— 바이런
소스

9

테이블을 사용해야합니다. 논리적 구조 의 문제로 데이터는 표 형식입니다. 따라서 레이블이 입력 상자에만 국한되지 않고 2 차원 구조로 서로 관련되어 있음을 보여주고 싶기 때문에 정렬해야합니다.

[입력 상자 대신 표시 할 문자열 또는 숫자 값이있는 경우 수행 할 작업을 고려하십시오.]

— 콜린 스트리트
소스

2

당신의 접근에 감사드립니다.

— Jono

2

이를 위해 올바른 HTML 의미를 유지하고 가능한 한 간단한 CSS를 사용하는 것을 선호합니다.

이와 같은 것이 작업을 수행합니다.

label{
  display: block;
  float: left;
  width : 120px;    
}

그러나 한 가지 단점은 각 양식에 대해 올바른 레이블 너비를 선택해야 할 수 있으며 레이블이 동적 일 수있는 경우 쉽지 않습니다 (예 : I18N 레이블).

— 사무엘 유스 타치
소스

1

저는 정의 목록을 사용하는 것을 좋아합니다.

<dl>
<dt>Username:</dt>
<dd><input type="text" name="username" /></dd>
<dt>Password:</dt>
<dd><input type="password" name="password" /></dd>
</dl>

CSS를 사용하여 스타일을 지정하기 쉽고 레이아웃에 테이블을 사용하는 오명을 피합니다.

— 앤드류
소스

이것은 divs (a dd는 ~ 40px 왼쪽 여백이 있음)를 사용하여 쉽게 수행 할 수 있으며 의미 혼란을 방지합니다. 게다가, 이들 중 어느 것도 동일한 라인의 라벨 / 입력과 일치하지 않습니다.

— Hollister

1

CSS 사용

.containerdiv label {
  float:left;
  width:25%;
  text-align:right;
  margin-right:5px; /* optional */
}
.containerdiv input {
  float:left;
  width:65%;
}

이것은 당신에게 다음과 같은 것을 제공합니다.

           label1 |input box             |
    another label |another input box     |

— Gjaa
소스

또한 사용해야합니다 clear말에 대한 최대 적재 형태의 작은 폭을 피하기 위해

— 마스터

0

전통적인 방법은 테이블을 사용하는 것입니다.

예:

<table>
  <tbody>
     <tr>
        <td>
           First Name:
        </td>
        <td>
           <input type="text" name="first">
        </td>
     </tr>
     <tr>
        <td>
           Last Name:
        </td>
        <td>
           <input type="text" name="last">
        </td>
     </tr>
  </tbody>
</table>

그러나 많은 사람들은 테이블이 CSS를 제한하고 선호한다고 주장합니다. CSS 사용의 이점은 다양한 요소를 사용할 수 있다는 것입니다. div, 정렬 및 정렬되지 않은 목록에서 동일한 레이아웃을 수행 할 수 있습니다.

결국 가장 편한 것을 사용하고 싶을 것입니다.

힌트 : 테이블은 시작하기 쉽습니다.

— OV 웹 솔루션
소스

1

시작하기 쉽다고 말한 +1 ... 그러나 실제로 개발자는 데이터 테이블에만 의존해야합니다 (완전한 폭언에 대해서는 다른 답변에 대한 내 의견 참조!)

— ClarkeyBoy 2010

1

CSS 테이블을 사용하는 것은 매우 쉽고 관련된 접근성 문제가 없습니다. 아래 내 대답을 참조하십시오 .

— Clément

0

아주 기본적인 사항을 위해 테이블에 정렬 해 볼 수 있습니다. 그러나 테이블은 내용을위한 것이기 때문에 테이블의 사용은 레이아웃에 좋지 않습니다.

사용할 수있는 것은 CSS 플로팅 기술입니다.

CSS 코드

.styleform label{float:left;}
.styleform input{margin-left:200px;} /* this gives space for the label on the left */
.styleform .clear{clear:both;} /* prevent elements from stacking weirdly */

HTML

<div class="styleform">
<form>
<label>First Name:</label><input type="text" name="first" /><div class="clear"></div>
<label>Last Name:</label><input type="text" name="first" /><div class="clear"></div>
<label>Email:</label><input type="text" name="first" /><div class="clear"></div>
</form>
</div>

내가 쓴 정교한 기사는 IE7 float 문제에 대한 답을 찾을 수 있습니다 : IE7 float right problems

— Mauris
소스

예를 들어 주셔서 감사하지만 HTML 양식은 여전히 문제를 해결하지 못합니다. 당신은 예를 들어 단지 '이름'에 그 중 하나의 '이름'을 변경하면, 내가 처음이 있었다 같은 문제와 끝까지

— yoshyosh

나는 이것을 디자이너들과 함께 일했고 약간 깨지기 쉬운 IME입니다. 이 기본 레이아웃의 경우 98 % 정도 괜찮습니다. 2 열 레이아웃 또는 여러 줄 레이블과 같이 너무 복잡해 지려고하면 어려워집니다.

— staticsan 2010

1

@staticsan-float, clears 및 div를 이해하면 이러한 레이아웃으로 잘 작동하며 실제로 최신 브라우저의 테이블에 비해 더 빠르고 유연하게 렌더링됩니다.

— mauris 2010

글쎄, 나는 내가 floats, clears 및 divs를 이해 한다고 생각 했지만 그것이 깨지지 않고 주어진 형태를 확장 할 수 없었습니다. 그것이 내 이해의 결함이든 디자이너의 구현이든, 사실은 여전히 취약했습니다. (흥미롭게도 다음 버전은 ul태그를 사용하는 하이브리드 디자인에 더

— 가깝습니다

0

나는 이것이 이미 답변을 받았음을 알고 있지만, 추가 이점과 함께 멋지게 정렬하는 새로운 방법을 찾았습니다. http://www.gargan.org/en/Web_Development/Form_Layout_with_CSS/ 참조

기본적으로 입력 주위에 레이블 요소를 사용하고 다음을 사용하여 정렬합니다.

<label><span>Name</span> <input /></label>
<label><span>E-Mail</span> <input /></label>
<label><span>Comment</span> <textarea></textarea></label>

그런 다음 CSS로 간단히 정렬합니다.

label {
    display:block;
    position:relative;
}

label span {
    font-weight:bold;
    position:absolute;
    left: 3px;
}

label input, label textarea, label select {
    margin-left: 120px;    
}

줄 바꿈을 위해 지저분한 br이 필요하지 않습니다. 즉, 다중 열 레이아웃을 동적으로 빠르게 수행 할 수 있습니다.
전체 라인을 클릭 할 수 있습니다. 특히 체크 박스의 경우 이것은 큰 도움이됩니다.
양식 줄을 동적으로 표시 / 숨기기가 쉽습니다 (입력을 검색하고 부모-> 레이블을 숨기기 만하면됩니다).
전체 레이블에 클래스를 할당하여 오류 입력을 훨씬 더 명확하게 표시 할 수 있습니다 (입력 필드 주변뿐만 아니라)

— 니코
소스

좋지만 고정 레이블 너비가 필요합니다. 큰 레이블의 텍스트가 입력을 재정의합니다.

— 마우 렛토

0

클레망의 대답은 단연 최고입니다. 다음은 왼쪽-중앙-오른쪽 정렬 버튼을 포함하여 가능한 다른 정렬을 보여주는 다소 개선 된 답변입니다.

label
{	padding-right:8px;
}

.FAligned,.FAlignIn
{	display:table;
}

.FAlignIn
{	width:100%;
}

.FRLeft,.FRRight,.FRCenter
{	display:table-row;
	white-space:nowrap;
}

.FCLeft,.FCRight,.FCCenter
{	display:table-cell;
}

.FRLeft,.FCLeft,.FILeft
{	text-align:left;
}

.FRRight,.FCRight,.FIRight
{	text-align:right;
}

.FRCenter,.FCCenter,.FICenter
{	text-align:center;
}

<form class="FAligned">
	<div class="FRLeft">
		<p class="FRLeft">
			<label for="Input0" class="FCLeft">Left:</label>
			<input id="Input0" type="text" size="30"  placeholder="Left Left Left" class="FILeft"/>
		</p>
		<p class="FRLeft">
			<label for="Input1" class="FCRight">Left Right Left:</label>
			<input id="Input1" type="text" size="30"  placeholder="Left Right Left" class="FILeft"/>
		</p>
		<p class="FRRight">
			<label for="Input2" class="FCLeft">Right Left Left:</label>
			<input id="Input2" type="text" size="30"  placeholder="Right Left Left" class="FILeft"/>
		</p>
		<p class="FRRight">
			<label for="Input3" class="FCRight">Right Right Left:</label>
			<input id="Input3" type="text" size="30"  placeholder="Right Right Left" class="FILeft"/>
		</p>
		<p class="FRLeft">
			<label for="Input4" class="FCLeft">Left Left Right:</label>
			<input id="Input4" type="text" size="30"  placeholder="Left Left Right" class="FIRight"/>
		</p>
		<p class="FRLeft">
			<label for="Input5" class="FCRight">Left Right Right:</label>
			<input id="Input5" type="text" size="30"  placeholder="Left Right Right" class="FIRight"/>
		</p>
		<p class="FRRight">
			<label for="Input6" class="FCLeft">Right Left Right:</label>
			<input id="Input6" type="text" size="30"  placeholder="Right Left Right" class="FIRight"/>
		</p>
		<p class="FRRight">
			<label for="Input7" class="FCRight">Right:</label>
			<input id="Input7" type="text" size="30"  placeholder="Right Right Right" class="FIRight"/>
		</p>
		<p class="FRCenter">
			<label for="Input8" class="FCCenter">And centralised is also possible:</label>
			<input id="Input8" type="text" size="60"  placeholder="Center in the centre" class="FICenter"/>
		</p>
	</div>
	<div class="FAlignIn">
		<div class="FRCenter">
			<div class="FCLeft"><button type="button">Button on the Left</button></div>
			<div class="FCCenter"><button type="button">Button on the Centre</button></div>
			<div class="FCRight"><button type="button">Button on the Right</button></div>
		</div>
	</div>
</form>

스 니펫 확장

padding-right:8px예제를 약간 덜 끔찍하게 보이게 만들기 위해 모든 레이블 ( ) 의 오른쪽에 패딩을 추가 했지만 실제 프로젝트에서는 더 신중하게 수행해야합니다 (다른 모든 요소에 패딩을 추가하는 것도 좋은 생각입니다).

— 사이버 나이트
소스

-1

CSS는 Gjaa와 비슷하지만 더 나은 스타일로이 문제를 해결하는 데 사용했습니다.

p
{
    text-align:center;
        }
.styleform label
{
    float:left;
    width: 40%;
    text-align:right;
    }
.styleform input
{
    float:left;
    width: 30%;
    }

다음은 PHP 코드가없는 간단한 등록 양식에 특별히 사용되는 HTML입니다.

<form id="registration">
    <h1>Register</h1>
    <div class="styleform">
    <fieldset id="inputs">
        <p><label>Name:</label> 
          <input id="name" type="text" placeholder="Name" autofocus required>
        </p>
        <p><label>Email:</label>   
          <input id="email" type="text" placeholder="Email Address" required>
        </p>
        <p><label>Username:</label>
          <input id="username" type="text" placeholder="Username" autofocus required>
        </p>
        <p>   
          <label>Password:</label>
          <input id="password" type="password" placeholder="Password" required>
        </p>
    </fieldset>
    <fieldset id="actions">

    </fieldset>
    </div>
    <p>
          <input type="submit" id="submit" value="Register">
          </p>

매우 간단하고 이제 막 시작했지만 꽤 잘 작동했습니다.

— PA_Commons
소스

-1

정렬되지 않은 목록에 입력 태그를 삽입하고 스타일 유형을 없음으로 설정합니다. 여기에 예가 있습니다.

<ul>
Input1     
<li> <input type="text" />
Input2
<li> <input type="text" />
<ul/>

나를 위해 일했습니다!

— Vivek Iyer
소스

이것은 작동하지 않을 것입니다. UL아무것도 정렬하지 않고 여백에서 콘텐츠를 들여 쓰기합니다. inputs를 넣으면 그 LI앞에 글 머리 기호가 추가됩니다 (예, 레이블이 아닌 목록으로 정렬됩니다). 또한 "Input2"는 이전 input요소에 고정됩니다.는 LI닫혀 있지 않고 (없음 </li>) <li>해당 "라벨"에 대한 시작이 없기 때문에 일반적인 텍스트로 처리되므로 이전 요소. 마지막으로 코드에 오류가 있으며 닫는 값 <ul/>은 </ul>.

— Cyberknight

-2

<form>
    <div>
        <label for='username'>UserName</label>
        <input type='text' name='username' id='username' value=''>  
    </div>
</form>

CSS에서 레이블과 입력을 모두 display : inline-block으로 선언하고 요구 사항에 따라 너비를 지정해야합니다. 이것이 당신을 도울 수 있기를 바랍니다. :)

— kta
소스

-4

간단히 추가

<form align="center ></from>

여는 태그에 정렬 만하면됩니다.

— 잭 길
소스

이것은 속성 form이 없기 때문에 작동 하지 않을 것 align입니다 (그리고 속성이 있더라도 스타일 / CSS 사용에 대해 더 이상 사용되지 않을 것입니다). 또한 닫는 태그가 잘못 </form>되었습니다.. style="text-align:center"내부 에 정의 할 수 있으며 form, 양식의 전체 내용을 중앙에 정렬 할 수 있지만 원래 질문에 대한 내용은 아닙니다. 이것은 입력 필드에 대해 레이블을 정렬하지 않습니다 (예, 확실히하기 위해 Firefox 75에서 테스트했습니다).

— Cyberknight