방법 - 누적 양식
CSS를 사용하여 스택 양식을 만드는 방법을 알아보세요.
스택 형태
수직으로 쌓인 양식(입력과 레이블이 나란히 놓이지 않고 서로 위에 놓이는 곳):
누적 양식을 만드는 방법
1단계) HTML 추가
<form> 요소를 사용하여 입력을 처리합니다. PHP 튜토리얼 에서 이에 대해 자세히 알아볼 수 있습니다 .
각 필드에 대한 입력(일치하는 레이블 포함)을 추가합니다.
예시
<form action="/action_page.php">
<label for="fname">First
Name</label>
<input type="text" id="fname" name="firstname"
placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country"
name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<input type="submit" value="Submit">
</form>
2단계) CSS 추가:
예시
/* Style inputs */
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing:
border-box;
}
/* Style the submit
button */
input[type=submit] {
width: 100%;
background-color: #04AA6D;
color: white;
padding: 14px
20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* Add a background color to the submit button on
mouse-over */
input[type=submit]:hover {
background-color: #45a049;
}
팁: HTML 양식 에 대해 자세히 알아보려면 HTML 양식 자습서 로 이동하십시오 .
팁: 양식 요소의 스타일을 지정하는 방법에 대해 자세히 알아보려면 CSS 양식 자습서 로 이동하십시오 .