-
[HTML] Form카테고리 없음 2022. 9. 8. 13:38
input type tag
-사용자로부터 각 정보를 입력 받을 수 있는 입력란 태그들을 지칭
-흔히 회원가입 시 볼 수 있는 아이디 입력란, 패스워드 입력란, 성별 선택란 등 이 있으며 한 그룹으로 묶어서 다루어 짐. 그 한 그룹은 form 태크에 의해 구분됨.
form 태그
-하나의 주제를 갖고 입력하는 다수의 사항을 하나의 그룹으로 묶어주는 태그
<!-- action: form 작성 완료 시 이동하는 페이지 --> <form action = "action"> <!-- 글자를 입력 받을 수 있는 입력란 --> 아이디 : <input type="text" name="id" /><br /><hr /> <!-- name="id" -> 현재 입력란의 이름을 "id" 로 설정합니다 --> <!-- 비밀번호 입력 양식 생성--> PASSWORD : <input type="password" name="pw"/><hr /> <!-- 입력되어 지는 내용들은 특정 이벤트(버튼 클릭 또는 submit(전송) 실행)에 의해 서버로 전달되어 지게 되는데, 이때 전달되는 내용을 서로 구분하기위해 name을 만들어서 지정함. 서버에서는 그 name을 이용하여 전달된 값들을 구분함. id와 pw를 서로 구분 지정된 name의 이름으로 입력란의 입력한 내용이 value값으로 전달됨 --> <!-- 체크 박스 생성 --> <!-- 첫째 둘째 셋째 는 화면 표시되는 단어들이고, value 값들은 서버에 전달되는 값들임--> 첫째<input type="checkbox" value="first" name="ch"/> 둘째<input type="checkbox" value="second" name="ch"/> 셋째<input type="checkbox" value="third" name="ch"/><hr /> <!-- 복수개의 선택 가능. 서버로 전송되는건 name과 value들이 전달되는데 이때 전달된 복수개의 value 들은 자바에서 사용하는 String [] s와 같은 1차원 문자 배열형태로 처리됨. 첫째와 둘때를 선택해서 전송한 경우 String [] s <= {"first" , "second"}--> <!-- 라디오 버튼: 체크박스와 비슷하지만 그룹 중 하나만 선택이 가능한 선택 버튼 --> 남자<input type="radio" name="gender" value="m"/> 여자<input type="radio" name="gender" value="f"/> 남자<input type="radio" name="gender" value="m"/> 여자<input type="radio" name="gender" value="f"/><hr /> <!-- 펼침 목록 --> <select name="food"> <option value="1">김밥</option> <option value="2">떡볶이</option> <option value="3">튀김</option> <option value="4">순대</option> </select><hr /> <!-- 파일 입력 양식 생성 --> 파일 : <input type="file" name="selectfile"/><hr /> <!-- 버튼 생성 --> <!-- 일반 버튼: 모든 영역에서 기능이 발휘 --> <input type="button" value="클릭" /><hr /> <!-- 멀티라인 텍스입력 란 --> <textarea cols="50" rows="10" name="description"> 가나다라마바사</textarea><hr /> <!-- 입력 내용 안내 placeholder는 클릭하고 내용을 입력하면 지워지는 안내문구 --> 주소 : <input type="text" size="50" placeholder="주소입력"/><hr/> <!-- 보이지 않는 입력 양식 생성: 화면에서 입력받거나 표시되지 않지만 서버에 같이 전송되어야할 데이터들을 hidden 태크를 이용하여 숨겨놓고 전송시 같이 전송되게 함 --> <input type="hidden" name="loginuser" value="홍길동"/><hr /> <!-- name과 value만 있고 형체가 없는 입력란: 입력란이라기보다 저장데이터로 많이 사용함 --> <input type="submit" value="전송"> <input type="reset" value="다시작성" /><hr /> </form> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>19_Join.html</title> </head> <body> <form action=""> <table width="80%" align="center" bgcolor="blue" cellspacing="1"> <tr bgcolor="white"> <th><label for="id">아이디</label></th><td><input type="text" size="30" id="id"></td> </tr> <tr bgcolor="white"> <th>PASSWORD</th><td><input type="password" size="30"></td> </tr> <tr bgcolor="white"> <th>전화번호</th> <td> <select> <option value="">선택</option> <option value="010">010</option> <option value="02">02</option> <option value="031">031</option> <option value="032">032</option> </select>- <input type="text" size="10">- <input type="text" size="10"> </td> </tr> <tr bgcolor="white"> <th>성별</th> <td> <input type="radio" name="gender">남자 <input type="radio" name="gender">여자 </td> </tr> <tr bgcolor="white"> <th>알게된 경로</th> <td> <input type="checkbox" name="d">신문 <input type="checkbox" name="d">TV <input type="checkbox" name="d">지인소개 <input type="checkbox" name="d">기타 </td> </tr> <tr bgcolor="white"> <th>직업</th> <td> <select> <option>학생</option> <option>회사원</option> <option>공무원</option> <option>기타</option> </select> </td> </tr> <tr bgcolor="white"> <th>생년월일</th> <td> <input type="text" size="10">년 <select> <option>1</option><option>2</option><option>3</option> <option>4</option><option>5</option><option>6</option> <option>7</option><option>8</option><option>9</option> <option>10</option><option>11</option><option>12</option> </select> 월 <select> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option> <option>13</option> <option>14</option> <option>15</option> <option>16</option> <option>17</option> <option>18</option> <option>19</option> <option>20</option> <option>21</option> <option>22</option> <option>23</option> <option>24</option> <option>25</option> <option>26</option> <option>27</option> <option>28</option> <option>29</option> <option>30</option> <option>31</option> </select> 일 </td> </tr> <tr bgcolor="white"> <th>주소</th><td><input type="text" size="50"></td> </tr> <tr bgcolor="white"> <td colspan="2" align="center"> <input type="submit" value="작성완료" /> <input type="reset" value="취소" /> </td> </tr> </table> </form> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>20_Label.html</title> </head> <body> <form action=""> <label for="hobby">취미 : </label> <input type="text" id="hobby" /> </form> </body> </html>
로그인 창 리셋하기
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>21_FieldSet.html</title> </head> <body> <form> <fieldset> <legend>로그인</legend> <table > <tr> <td><label for="id">아이디</label></td> <td><input type="text" id="id"/></td> </tr> <tr> <td><label for="pwd">비밀번호</label></td> <td><input type="password" id="pwd"/></td> </tr> </table> <input type="submit" value="로그인"/> </fieldset> </form> </body> </html>
