HTML day5
| <form> 태그 | <input> 태그 |
폼 <form>
웹페이지에서 사용자로부터 입력을 받을 때 사용하는 태그로, 사용자가 입력한 데이터를 서버로 보낼 때 form 요소를 사용한다.
<form> 태그는 몇가지의 속성을 사용해서 입력 받은 자료를 어떤 방식으로 서버로 넘길 것인 지, 서버에서 어떤 프로그램을 이용햐 처리할 것인지 지정한다.
<form> 태그 속성
method 속성
사용자가 입력한 내용을 서버쪽 프로그램으로 어떻게 넘겨줄 것인지 지정한다.
get : 데이터를 URL에 실어 전달 post : 데이터를 BODY에 묶어 전달
<form method="post"> ... 입력 요소 </form>
action 속성
<form> 태그 안의 내용을 처리해 줄 서버를 지정한다.
<form method="post" action="regist.jsp> ... 입력 요소 </form>
name 속성
자바스크립트로 폼을 제어할때 사용할 폼의 이름을 지정한다.
target 속성
action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 한다.
<fieldset>, <legend> 태그
하나의 폼 안에서 여러 구열을 나누어 표시할 때 <fieldset> 태그를 사용한다. <legend> 태그는 <fieldset> 태그로 묶은 그룹에 제목을 붙이는 역할을 한다.
<body>
<h2>상품 주문</h2>
<form action="#" method="post">
<fieldset>
<legend>상품 정보</legend>
</fieldset>
<fieldset>
<legend>배송 정보</legend>
</fieldset>
</body>
<label> 태그
<label> 태그는 <input> 태그와 같은 폼요소에 레이블을 붙을 때 사용한다. 레이블이란 입력란 가까이 아이디나 비밀번호처럼 붙여 놓은 텍스트를 의미한다. <label> 태그를 사용하게 되면 폼 요소와 레이블 텍스트가 서로 연결 되었다는 것을 웹 브라우저가 알 수 있다.
<label> 태그를 사용하는 방법은 2가지로 첫번째 방법은 태그 안에 폼 요소를 넣는 것이다.
<label>남자<input type="radio"></label>
두번째 방법은 <label> 태그와 폼요소를 따로 사용하고 <label> 태그의 for 속성과 폼 요소의 id 속성을 이용해 서로 연결하는 것이다. 다시말해 폼 요소의 id 속성값을 <label> 태그의 for 속성에게 알려주는 방법이다.
<label for="man">남자</label>
<input type="radio" id="man">
두 번째 방법은 첫번째 방법보단 복잡해보이지만 <label> 태그를 사용한 레이블과 사용자 벙보를 입력받은 <input> 태그가 떨어져 있더라도 둘 사이를 쉽게 연결할 수 있다는 장점이 있다.
입력상자 <input>
아이디나 검색어를 입력하는 검색 상자나 로그인 버튼처럼 사용자가 입력할 부분을 주로 <input> 태그를 이용한다.
<input> 태그의 type 속성
text : 문자를 입력 받는 글 상자 <input type=”text”> password : 비밀번호를 입력 받는 글상자 <input type=”password”>
<body>
<h2>회원가입</h2>
<form action="#" method="post">
<p>아이디 :
<input type="text" size="20" maxlength="20" name="userid" id="userid" class="form" placeholder="아이디를 입력하세요"
required>
</p>
<p>비밀번호 :
<input type="password" size="20" maxlength="20" placeholder="비밀번호는 입력하세요" required>
</p>
</form>
</body>
<!--
size 속성 : 크기를 설정하는 속성
maxlength 속성 : 값의 최대길이를 설정하는 속성
placeholder 속성 : 입력전 특정 데이터를 입력하도록 안내하는 값을 설정
-->
radio : 여러개의 옵션 중에서 단 하나의 옵션만을 입력 받을 수 있도록 하는 버튼 <input type=”radio” name=”gender”> radio 는 그룹을 맻기 위해 name 속성의 값이 동일해야함
<body>
<h2>회원가입</h2>
<form action="#" method="post">
<fieldset>
<legend>성별</legend>
<p><label>남자<input type="radio" name="gender" value="남자" checked></label>
<label>여자<input type="radio" name="gender" value="여자"></label>
</p>
</fieldset>
</form>
</body>
<!--
checked 속성 : 여러개의 라디오 또는 체크박스 중에서 미리 선택하는 옵션을 설정
-->
checkbox : 여러개의 옵션 중에서 다수의 옵션을 입력 받을 수 있도록 하는 버튼 <input type=”checkbox”>
<body>
<h2>회원가입</h2>
<form action="#" method="post">
<p>취미 : <label>요리<input type="checkbox" name="hobby" value="드라이브" checked></label>
<label>등산<input type="checkbox" name="hobby" value="등산" checked></label>
<label>게임<input type="checkbox" name="hobby" value="게임" ></label>
<label>쇼핑<input type="checkbox" name="hobby" value="쇼핑" ></label>
<label>독서<input type="checkbox" name="hobby" value="독서" disabled></label>
</p>
</form>
</body>
<!--
disabled 속성 : 입력필드를 사용할 수 없게 설정, 비활성화
-->
file : 원하는 파일을 서버로 전송하기 위한 글상자
<textarea> 태그 : 여러줄의 텍스트를 입력 받는 글상자
<textarea cols=”가로글상자” rows=”세로글상자”></textarea>
<body>
<h2>회원가입</h2>
<form action="#" method="post">
<p>사진 : <input type="file"></p>
<p>쿠폰 : <input type="text" readonly></p>
<p><textarea cols="30" rows="10"></textarea></p>
</form>
</body>
<!--
readonly 속성 : 입력필드를 볼 수 있으나 수정을 할 수 없게하는 설정
-->
button : 이벤트가 없는 일반 버튼 reset : 입력받은 데이터를 초기화 하는 버튼 submit : 입력받은 데이터를 서버에 제출하는 버튼
<body>
<h2>회원가입</h2>
<form action="#" method="post">
<p>
<input type="button" value="확인" onclick="alert('클릭했습니다!')">
<input type="reset" value="다시작성">
<input type="submit" value="가입">
</p>
</form>
</body>
<select> 태그 : 여러개의 옵션이 드롭다운 리스트로 되어있으며 그 중에서 단 하나의 옵션만을 입력 받을 수 있다.
<option> 요소를 통해 선택 할 수 있는 아이템을 설정함
<select>
<option>내용</option>
<option>내용</option>
</select>
<body>
<h2>회원가입</h2>
<form action="#" method="post">
<p>직업 :
<select name="job">
<option value="">선택하세요</option>
<option value="학생">학생</option>
<option value="의사">의사</option>
<option value="변호사">변호사</option>
<option selected value="개발자">개발자</option>
<option value="백수">백수</option>
<option value="건물주">건물주</option>
<option value="공무원">공무원</option>
</select>
</p>
</form>
</body>
<!--
selected 속성 : 셀렉트의 option 중에서 미리 선택하는 옵션
-->
