카테고리 없음
[HTML] Form
hvoon
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>
