반응형
form 태그를 사용하여 사용자가 검색창에 텍스트를 입력하고 검색 버튼을 눌렀을 때 해당 양식을 서버로 보낸다.
- input:search : 검색할 텍스트 상자
- input:submit : 검색 버튼
<head>
<style>
div, form{
border: 1px solid black; /*틀을 확인하기 위해 작성. 생략해도 됨.*/
box-sizing: border-box;
}
#header_2{ /*전체 틀 크기*/
width: 600px;
height: 150px;
position: relative; /*검색창을 가운데 정렬하기 위해 기준을 잡아놓는다.*/
}
#searchForm{
position: absolute; /*#header_2를 기준으로 가운데 정렬한다.*/
width: 70%;
height: 30%;
/*#header_2 기준으로 좌/우/위/아래로부터의 거리 조절*/
right: 0px;
left: 0px;
top: 0px;
bottom: 0px;
}
#searchForm>div{
height: 100%;
float: left; /*왼쪽 정렬*/
}
#searchInput{
width: 80%;
}
#searchButton{
width: 20%;
}
#searchForm input{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="header_2">
<form action="test.do" id="searchForm">
<div id="searchInput">
<input type="search" name="keyword" id="search">
</div>
<div id="searchButton">
<input type="submit" value="검색">
</div>
</form>
</div>
</body>
반응형