HTML에서 입력 양식을 정렬하는 방법
저는 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의 기본 만 배웠습니다.
또 다른 예는 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>허용되는 답변 (명시적인 너비 (픽셀 단위) 설정)은 변경하기 어렵고 사용자가 다른 글꼴 크기를 사용하면 깨집니다. 반면에 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경우에.
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>
레이블 표시를 인라인 블록으로 변경하고 너비를 설정하는 것이 훨씬 더 쉽습니다.
label {
display: inline-block;
width:100px;
text-align: right;
}
테이블을 사용해야합니다. 논리적 구조 의 문제로 데이터는 표 형식입니다. 따라서 레이블이 입력 상자에만 국한되지 않고 2 차원 구조로 서로 관련되어 있음을 보여주기를 원하기 때문에 데이터를 정렬해야합니다.
[입력 상자 대신 표시 할 문자열 또는 숫자 값이있는 경우 수행 할 작업을 고려하십시오.]
이를 위해 올바른 HTML 의미를 유지하고 가능한 한 간단한 CSS를 사용하는 것을 선호합니다.
이와 같은 것이 작업을 수행합니다.
label{
display: block;
float: left;
width : 120px;
}
그러나 한 가지 단점은 각 양식에 대해 올바른 레이블 너비를 선택해야 할 수 있으며 레이블이 동적 일 수있는 경우 쉽지 않습니다 (예 : I18N 레이블).
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 |
아주 기본적인 사항을 위해 테이블에 정렬 해 볼 수 있습니다. 그러나 테이블은 내용을위한 것이기 때문에 테이블의 사용은 레이아웃에 좋지 않습니다.
What you can use is CSS floating techniques.
CSS Code
.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>
An elaborated article I wrote can be found answering the question of IE7 float problem: IE7 float right problems
I'm a big fan of using definition lists.
<dl>
<dt>Username:</dt>
<dd><input type="text" name="username" /></dd>
<dt>Password:</dt>
<dd><input type="password" name="password" /></dd>
</dl>
They're easy to style using CSS, and they avoid the stigma of using tables for layout.
I know this has already been answered, but I found a new way to align them nicely - with an extra benefit - see http://www.gargan.org/en/Web_Development/Form_Layout_with_CSS/
basically you use the label element around the input and align using that:
<label><span>Name</span> <input /></label>
<label><span>E-Mail</span> <input /></label>
<label><span>Comment</span> <textarea></textarea></label>
and then with css you simply align:
label {
display:block;
position:relative;
}
label span {
font-weight:bold;
position:absolute;
left: 3px;
}
label input, label textarea, label select {
margin-left: 120px;
}
- you do not need any messy br lying around for linebreaks - meaning you can quickly accomplish a multi-column layout dynamically
- the whole line is click-able. Especially for checkboxes this is a huge help.
- Dynamically showing/hiding form lines is easy (you just search for the input and hide its parent -> the label)
- you can assign classes to the whole label making it show error input much clearer (not only around the input field)
The traditional method is to use a table.
Example:
<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>
However, many would argue that tables are restricting and prefer CSS. The benefit of using CSS is that you could use various elements. From divs, ordered and un-ordered list, you could accomplish the same layout.
In the end, you'll want to use what you're most comfortable with.
Hint: Tables are easy to get started with.
css I used to solve this problem, similar to Gjaa but styled better
p
{
text-align:center;
}
.styleform label
{
float:left;
width: 40%;
text-align:right;
}
.styleform input
{
float:left;
width: 30%;
}
Here is my HTML, used specifically for a simple registration form with no php code
<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>
It's very simple, and I'm just beginning, but it worked quite nicely
Insert input tags inside an unordered lists.Make the style-type none. Here's an example.
<ul>
Input1
<li> <input type="text" />
Input2
<li> <input type="text" />
<ul/>
Worked for me !
<form>
<div>
<label for='username'>UserName</label>
<input type='text' name='username' id='username' value=''>
</div>
</form>
In the CSS you have to declare both label and input as display: inline-block and give width according to your requirements. Hope this will help you. :)
I think it would be easier if you used a table to structure your form. Might be exhausting but nothing 'copy and paste' with a little editing can't fix.
<form>
<table>
<tr>
<td> <label>First Name:</label> </td> <td> <input type="text" name="first"> </td> </tr>
<tr> <td> <label>Last Name:</label> </td> <td> <input type="text" name="last"> </td></tr>
<tr> <td> <label> Email: </label> </td> <td> <input type="text" name="email"> </td></tr>
</table>
</form>
Your can add some padding or float the cell contents to make it look more spacious.
Simply add
<form align="center ></from>
Just put align in opening tag.
참고URL : https://stackoverflow.com/questions/4309950/how-to-align-input-forms-in-html
'IT story' 카테고리의 다른 글
| 하위 문자열이 다른 문자열에 있는지 확인하는 방법 (0) | 2020.08.11 |
|---|---|
| MySQL : # 126-테이블에 대한 잘못된 키 파일 (0) | 2020.08.11 |
| C ++에서 난수를 생성하는 방법은 무엇입니까? (0) | 2020.08.11 |
| Python의 목록에서 각 튜플의 첫 번째 요소를 가져옵니다. (0) | 2020.08.11 |
| jquery에서 텍스트 상자 값을 설정하는 방법 (0) | 2020.08.11 |