[HTML] <form>, 다양한 input type, 식별자(id, class, name), <a> vs <form>
식별자 id 고유한 식별을 목적으로 하는 경우 사용 페이지에서 하나의 요소만 지정 가능 class 재사용을 목적으로 하는 경우 사용 여러 개의 요소에 지정 가능 name form 컨트롤 요소의 값(value)을 서
jhost.tistory.com
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
iframe(inline frame)
==> 하나의 HTML문서 내부에 다른 HTML문서를 보여줄 때 사용
src, width
scrolling (스크롤 설정)
frameborder (태두리 표시 여부 결정)
-->
<iframe src="ex20.html" width="700" height="500" frameborder="1"></iframe>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<frameset cols="30% , *">
<frame src="ex13.html" />
<frameset rows="40%, *">
<frame src="ex20.html"/>
<frame src="" />
</frameset>
</frameset>
<body>
<!--
framset 태그
- 여러 개의 HTML문서를 동시에 한 화면에 나타날 수 있게 해주는 태그
- 여러개의 frame으로 구성되는 태그
frame 태그의 주요 속성
- cols : 수직으로 나누고 하는 프레임의 크기를 픽셀이나 비율(%)을
이용하여 순서대로 지정함
- rows : 수평으로 나눔
- frameborder : 프레임을 나눈 경게선의 두께 지정
주의) 반드시 body태그 밖에서 설정 해야 함
-->
</body>
</html>회원 로그인 화면
아이디와 비밀번호를 입력하세요
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!--
form 태그
==> 사용자에게 입력을 받을 데이터 양식을 설정하는 태그.
* input 태그 속성
- autocomplate : 사용자가 이전에 입력한 값으로
자동완성기능을 사용할 것인지 여부 설정.
==> on(default) or off
- autofocus : 페이지가 로드될 때 자동으로 포커스를 이동할지 여부 지정.
- checked : 양식이 선택되었음을 표시할지 여부 지정.
==> type 속성 값이 radio, checkbox인 경우만 사용 가능.
- disabled : 양식을 비활성화할지 여부 지정.
- max : 지정 가능한 최대값 설정.
==> type 속성 값이 number인 경우만 사용 가능.
min 속성 보다 큰 값만 허용.
- min : 지정 가능한 최소값 설정.
==> type 속성 값이 number인 경우만 사용 가능.
max 속성 보다 작은 값만 허용.
- maxlength : 입력 가능한 최대 문자 수 지정.
==> type 속성 값이 text, email,
password, tel, url인 경우만 허용.
- multiple : 둘 이상의 값을 입력할 수 있는지 여부 지정.
==> type 속성 값이 email, file인 경우면 허용 가능.
email인 경우에는 ,(콤마)로 구분.
- name : 양식의 이름을 지정.
- placeholder : 사용자가 입력할 값의 힌트 지정.
==> type 속성 값이 text, search,
tel, url, email인 경우만 허용.
- readonly : 수정 불가능한 읽기 전용 지정.
- step : 유효한 증감 숫자 간격의 지정.
==> type 속성 값이 number, range인 경우만 허용.
- src : 이미지의 url 지정.
==> type 속성 값이 image인 경우만 허용.
- alt : 이미지 대체 텍스트 지정.
==> type 속성 값이 image인 경우만 허용.
- type : 입력 받은 데이터의 종류 지정.
==> 하단에 type에 대한 내용 기재.
- value : 양식의 초기값 지정.
* 데이터의 종류(type)의 값(value)
- button : 일반 버튼.
==> onClick 속성을 이용하여
자바스크립트 함수를 호출할 때 사용함.
- checkbox : 체크 박스.
==> 여러 개 동시에 선택, 비선택 가능.
배열로 값이 전달이 됨.
- color : 색상 선택. ==> IE 지원 불가
- date : 날짜 선택. ==> IE 지원 불가
- email : 이메일 선택.
- file : 파일 선택.
- hidden : 보이지 않지만 전송할 양식 설정.
==> 양식에는 보이지 않지만 값이 전달될
때 같이 전달되는 양식.
- image : 이미지 제출 버튼.
- number : 숫자 선택 ==> IE 지원 불가
- password : 비밀번호 입력 가능.
==> 입력된 내용이 안 보이는 형식.
- radio : 라디오 버튼. 여러 개 중 하나만 선택됨.
- range : 범위 컨트롤 지정.
==> max, min, step, value(기본값) 속성 사용 가능함.
- reset : 초기화 하는 버튼.
==> 해당 form 범위 내의 모든 양식값이 초기화됨.
- search : 검색 기능 제공.
- submit : 제출 버튼 기능.
==> form 태그 속성 중 action 페이지로 해당 값들을 전송.
- tel : 전화번호 입력 가능.
- text : 일반 텍스트 입력 가능.
- url : 절대 url 입력 가능.
-->
<body>
<div align="center">
<h2>회원 로그인 화면</h2>
<h3>아이디와 비밀번호를 입력하세요</h3>
<form action="https://concho.tistory.com/">
<table border="1">
<tr>
<th>아이디</th>
<td>
<!--
autofocus 속성 사용하면
사용자가 아이디 클릭 안해도
바로 아이디 입력 가능
-->
<input type="text" autofocus
placeholder="4자 이상 16자 미만">
</td>
</tr>
<tr>
<th>비밀번호</th>
<td>
<input type="password">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="로그인">
<input type="reset" value="다시작성">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>파일을 선택하세요
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div align="center">
<h3>파일을 선택하세요</h3>
<hr width="30%">
<input type="file"> <br>
<input type="file"> <br>
<input type="file"> <br>
</div>
</body>
</html>
날짜와 시간을 선택하세요
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div align="center">
<h3>날짜와 시간을 선택하세요</h3>
<hr width="30%">
<input type="date">
<input type="time">
</body>
</html>
오늘은 1년 52주 중에 몇번쨰 주인가요?
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div align="center">
<h3>오늘은 1년 52주 중에 몇번쨰 주인가요?</h3>
<hr width="30%">
<input type="week">
</body>
</html>
수량을 선택하세요
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div align="center">
<h3>수량을 선택하세요</h3>
<hr width="30%">
<input type="number" min="1" max="100">
</body>
</html>
hw1 이력서
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
border: 2px solid black;
border-collapse: collapse;
width: 70%;
table-layout: fixed;
}
th {
border: 1px solid black;
border-collapse: collapse;
font-size: 17px;
background-color: #c9dcf5;
}
td{
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
</style>
<title>Document</title>
</head>
<body>
<div align="center">
<h1>이 력 서</h1><br>
<table>
<tr>
<th width="90">성    명</th>
<td colspan="2"></td>
<th width="90" rowspan="2">희망연봉</th>
<td colspan="2" rowspan="2"></td>
<td width="110" colspan="1" rowspan="4">
<img src="images\duily.jpg" alt="duily" width="70%">
</td>
</tr>
<tr>
<th width="60">연 락 처</th>
<td colspan="2"></td>
</tr>
<tr>
<th width="60">생년월일</th>
<td colspan="2"></td>
<th width="90">이메일</th>
<td colspan="2"></td>
</tr>
<tr>
<th width="60">주    소</th>
</tr>
</table><br>
<dl align="left">
<dd><ul><ul><ul><h4>1. 학력사항</h4></ul></ul></ul></dd>
</dl>
<hr width="70%">
<table>
<tr>
<th width="100">기    간</th>
<th width="150">학력사항</th>
<th width="90">전공</th>
</tr>
<td>-</td>
<td></td>
<td></td>
<tr>
<td>-</td>
<td></td>
<td></td>
</tr>
<td>-</td>
<td></td>
<td></td>
<tr>
<td>-</td>
<td></td>
<td></td>
</tr>
<tr>
</tr>
</table>
<dl align="left">
<dd><ul><ul><ul><h4>2. 경력사항</h4></ul></ul></ul></dd>
</dl>
<hr width="70%">
<table>
<tr>
<th width="100">기    간</th>
<th width="110">회사명</th>
<th width="90">부서</th>
<th width="80">직위</th>
</tr>
<td>-</td>
<td></td>
<td></td>
<td></td>
<tr>
<td>-</td>
<td></td>
<td></td>
<td></td>
</tr>
<td>-</td>
<td></td>
<td></td>
<td></td>
<tr>
<td>-</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
</tr>
</table>
<dl align="left">
<dd><ul><ul><ul><h4>3. 대외활동</h4></ul></ul></ul></dd>
</dl>
<hr width="70%">
<table>
<tr>
<th width="100">취득일</th>
<th width="150">자격증,수상</th>
<th width="90">발행처</th>
</tr>
<td>-</td>
<td></td>
<td></td>
<tr>
<td>-</td>
<td></td>
<td></td>
</tr>
<td>-</td>
<td></td>
<td></td>
<tr>
<td>-</td>
<td></td>
<td></td>
</tr>
<tr>
<td>-</td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
hw2 회원가입
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form method="GET" name="inputForm">
<br>
<h2 align="center">회원 가입</h2>
<table width="70%" align="center" border="solid black">
<tr>
<td>
<label for="sname">이름
</td>
<td>
<input type="text" name="sname" id="sname" size="20px">
</td>
</tr>
<tr>
<td>
<label for="id">아이디
</td>
<td>
<input type="text" name="id" id="id" size="20px">
<input type="button" id="check" value="중복확인">
</td>
</tr>
<tr>
<td>
<label for="pwd">비밀번호
</td>
<td>
<input type="text" name="pwd" id="pwd" size="20px"
placeholder="대소문자/숫자/특수문자 포함">
<br>*영문 대소문자/숫자/특수문자를 혼용하여 2종류10~16자 또는 3종 8~16자
</td>
</tr>
<tr>
<td>
<label for="pwdCheck">비밀번호 확인
</td>
<td>
<input type="text" name="pwdCheck" id="pwdCheck" size="20px">
</td>
</tr>
<tr>
<td>
생일/성별
</td>
<td>
<input type="radio" name="gender" value="남">남
<input type="radio" name="gender" value="여" checked>여
</td>
</tr>
<tr>
<td>
<label for="dong">우편번호
</td>
<td>
<input type="text" name="dong" id="dong" size="5">-
<input type="text" name="dong" id="dong" size="5">
<input type="button" id="address" value="우편번호검색">
</td>
</tr>
<tr>
<td>
<label for="home">집주소
</td>
<td>
<input type="text" name="home" id="home" size="60">
</td>
</tr>
<tr>
<td>
<label for="homeAddress">상세주소
</td>
<td>
<input type="text" name="homeAddress" id="homeAddress" size="60">
</td>
</tr>
<tr>
<td>
<label for="phone">연락처
</td>
<td>
<select id="phone">
<option value=""></option>
<option value="010">010</option>
<option value="011">011</option>
<option value="019">019</option>
</select>
-
<input type="text" name="phone" id="phone" size="10">-
<input type="text" name="phone" id="phone" size="10">
</td>
</tr>
<tr>
<td>
<label for="email">이메일
</td>
<td>
<input type="text" name="email" id="email" size="10">@
<select id="email2">
<option value=""></option>
<option value="1">gmail.com</option>
<option value="2">naver.com</option>
<option value="3">daum.com</option>
</select>
<input type="button" id="check2" value="중복확인">
</td>
</tr>
<tr>
<td>
<label for="homeAddress">회사전화
</td>
<td>
<select id="homeAddress">
<option value=""></option>
<option value="031">031</option>
<option value="032">032</option>
<option value="042">042</option>
</select>
-
<input type="text" name="homeAddress" id="homeAddress" size="10">-
<input type="text" name="homeAddress" id="homeAddress" size="10">
</td>
</tr>
<tr>
<td>
<label for="workhome">회사주소
</td>
<td>
<input type="text" name="address1" id="address1" size="5">-
<input type="text" name="address1" id="address1" size="5">
<input type="button" id="check2" value="우편번호검색">
<a href="https://www.epost.go.kr/search.RetrieveIntegrationNewZipCdList.comm" target="_blank">우편번호 검색</a>
<br/>
<input type="text" name="workhome" id="workhome" size="40">
</td>
</tr>
<tr>
<td>
휴대폰
</td>
<td>
<select id="smartPhone" name="smartPhone">
<option value="010">010</option>
<option value="011">011</option>
<option value="019">019</option>
</select>
-<input type="text" name="smartPhone1" size="5">
-<input type="text" name="smartPhone2" size="5">
</td>
</tr>
<tr>
<tr>
<td>
<label for="news">뉴스메일
</td>
<td>
<input type="radio" name="news" checked>받습니다.
<input type="radio" name="news">받지 않습니다.
</td>
</tr>
<tr>
<td>
<label for="sms">SMS안내(이벤트)
</td>
<td>
<input type="radio" name="sms" checked>받습니다.
<input type="radio" name="sms">받지 않습니다.
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" id="join" value="회원가입"
style="width: 100%; height: 60px;"
>
</td>
</tr>
</table>
</form>
</body>
</html>'2024 웹 > HTML, CSS, JavaScript' 카테고리의 다른 글
| 로그인 유효성 검사 js 이용방법 (0) | 2024.03.14 |
|---|---|
| Https -> Http 포워딩 오류 해결법 (0) | 2024.03.04 |
| HTML 기본 2 (0) | 2024.01.19 |
| HTML 기본 1 (0) | 2024.01.18 |
댓글