<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>tabledemo</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<figure>
<h2>커뮤니케이션 수단으로서의 인터넷</h2>
<table>
<!--<caption></caption> <figcaption></figcaption>이 대신 처리할 것-->
<colgroup><col span="2"></colgroup>
<colgroup>
<col>
<col>
</colgroup>
<thead>
<tr><th colspan="2">구분</th>
<th>인터넷 커뮤니티 가입률</th>
<th>인스턴스 메신저 이용률(%)</th></tr>
</thead>
<tbody>
<tr><td colspan="2">전체</td><td>45.2</td><td>37.1</td></tr>
<tr><td rowspan="6">연령</td>
<td>6 ~ 19세</td>
<td>43.0</td>
<td>38.1</td>
</tr>
<tr>
<td>20대</td><td>67.8</td><td>61.1</td>
</tr>
<tr>
<td>30대</td><td>67.8</td><td>61.1</td>
</tr>
<tr>
<td>40대</td><td>67.8</td><td>61.1</td>
</tr>
<tr>
<td>50대</td><td>67.8</td><td>61.1</td>
</tr>
<tr>
<td>60대</td><td>67.8</td><td>61.1</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" id="aaa">
출처 : 2006년 5월 통계자료 <cite>
<a href="http://www.kisa.kr/main.jsp">한국 인터넷 진흥원</a></cite>
</td>
</tr>
</tfoot>
</table>
</figure>
</body>
</html>
style.css
table {
border-collapse: collapse;
font-size : 15pt;
width : 700px;
}
thead{
background-color: yellow;
}
td, th {
border : 1px solid black;
text-align:center;
padding : 10px;
}
footer{
text-align:right;
}
#aaa{
text-align:right;
border-bottom-width:0px;
border-right-width:0px;
border-left-width:0px;
font-size:15px;
}
thead, tfoot, tbody 는 순서 상관없이 사용한다. 하지만 꼭 colgroup 다음에 써야한다.
colgroup은 걍 구조만 잡아주는 용. 그림을 그려준다던가 하는 역할은 아니다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
form : method 부분은 두가지로 나뉠 수 있다.
1. post : 패킷의 body를 통해 전송
data 노출x, body에 들어가기 때문에 size 신경안씀, submit 만 가능.
ex)회원가입
2. get : 패킷의 url을 통해 전송
data 노출, size 1kbyte 이하, 직접 url편집 or link를 통해서도 전송가능.
ex)인터넷사이트에서 링크를 통해 이동.
-------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>formdemo</title>
<script>
function test(){
//alert(document.form1.irum.value);
alert(document.forms[0].irum.value);
}
</script>
</head>
<body>
<form action="form.jsp" method="post" name="form1">
<p><label>고객 이름 : <input name="irum"></label></p>
<p><input type="button" value="전송" onclick="test()"></p>
</form>
</body>
</html>
-------------------------------------------
위와 같은 기능(버튼없음)이지만, label과 input을 분리함. input을 분리해서 for를 사용했다(서로연결됨). label인 "이름 : " 을 클릭하면 tf가 선택된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>labeldemo</title>
</head>
<body>
<form>
<p><label for="irum">이름 : </label><input type="text" id="irum"></p>
</form>
</body>
</html>
--------------------------------------
input type="password"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>password</title>
</head>
<body>
<form>
<p><label>이름 : <input></label></p>
<p><label>아이디 : <input></label></p>
<p><label>패스워드 : <input type="password"></label></p>
</form>
</body>
</html>
패스워드만 ***로 안보이게 표시.
------------------------------------------
required
예전 방식.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>required</title>
<script>
function test(){
var f = document.forms[0];
if(f.irum.value == "" || f.irum.value.length == 0){
alert("이름이 빠졌습니다.");
f.irum.focus();
return false;
}
if(f.userid.value == "" || f.userid.value.length == 0){
}
if(f.userpwd.value == "" || f.userpwd.value.length == 0){
}
}
</script>
</head>
<body>
<form>
<p><label>이름 : <input name="irum"></label></p>
<p><label>아이디 : <input name="userid"></label></p>
<p><label>패스워드 : <input type="password" name="userpwd"></label></p>
<p><input type="button" value="전송" onclick="test()"></p>
</form>
</body>
</html>
required 를 사용하면
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>required</title>
</head>
<body>
<form action="test.jsp" method="get">
<p><label>이름 : <input name="irum" required="required"></label></p>
<p><label>아이디 : <input name="userid" required></label></p>
<p><label>패스워드 : <input type="password" required id="userpwd"></label></p>
<p><input type="submit" value="전송"></p>
</form>
</body>
</html>
작성이 안된 텍스트필드에 입력란을 작성해달라고 툴팁이 뜬다. input type을 submit로 해서 서버로 전송하게 함. 여기서 다 채워서 전송을 누르면 test.jsp를 아직 안만들어서 에러 발생.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
placeholder
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>placeholder</title>
</head>
<body>
<p><label>입사날짜 : <input name="hiredate"
placeholder="2014-05-20"></label></p>
</body>
</html>
palceholder는 텍스트필드에 흐릿하게 적어줌. 위처럼 형식을 써준다던가, 아니면 설명을 써준다든지 한다.(ex)이름쓰는란에 placeholder 를 사용하여 Your ID로 설명을 써줌.)
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
maxlength
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>maxlength</title>
</head>
<body>
<form>
<p><label>주민번호 : <input size="8" maxlength="6"> - <input size="10" maxlength="7"></label></p>
</form>
</body>
</html>
size는 글자 수 만큼의 공간을 준다. 거기에 maxlength를 주면 공간은 size만큼 있지만 실제로 쓸 수 있는 공간은 maxlength 만큼이다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
autofocus
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>autofocus</title>
</head>
<body>
<form action="test.jsp" method="get">
<p><label>이름 : <input name="irum" autofocus required></label></p>
<p><label>아이디 : <input name="userid" required></label></p>
<p><label>패스워드 : <input type="password" required id="userpwd"></label></p>
<p><input type="submit" value="전송"></p>
</form>
</body>
</html>
자동으로 포커스를 맞춰줌.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
fieldset = swing의 titleborder와 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fieldset</title>
</head>
<body>
<form action="test.jsp" method="get">
<fieldset>
<legend>필수 입력</legend>
<p><label>이름 : <input name="irum" required="required"></label></p>
<p><label>아이디 : <input name="userid" required></label></p>
<p><label>패스워드 : <input type="password" required id="userpwd"></label></p>
</fieldset>
<p><input type="submit" value="전송"></p>
</form>
</body>
</html>
legend는 fieldset의 제목.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
radio : 여러개 중 하나만 선택.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>radio</title>
</head>
<body>
<form>
<p><label>성별 : </label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">남자</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">여자</label>
</p>
</form>
</body>
</html>
name은 같아야하고 value는 달라야함. checked 는 기본 선택.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
checkbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>checkbox</title>
</head>
<body>
<form method="get" action="test.jsp">
<fieldset>
<legend>관심분야</legend>
<p>
<label><input type="checkbox" name="interesting" value="html5" checked>HTML5</label>
<label><input type="checkbox" name="interesting" value="css3">CSS3</label>
<label><input type="checkbox" name="interesting" value="javascript">JavaScript</label>
</p>
<p>
<label><input type="checkbox" name="interesting" value="jsp">Servlet/JSP</label>
<label><input type="checkbox" name="interesting" value="ajax">Ajax</label>
<label><input type="checkbox" name="interesting" value="jquery">jQuery</label>
</p>
</fieldset>
<input type="submit">
</form>
</body>
</html>
checked 는 기본 선택.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
select : 체크박스or 라디오를 겹친게 select 임. 하나를 선택할 수도 여러개를 선택할 수도 있음. 콤보박스, JList 역할 가능.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>select</title>
</head>
<body>
<form action="test.jsp" method="get">
<p><label>휴대전화</label>
<select name="hp1" size="4">
<option>--선택--</option>
<option value="010" selected>010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="017">017</option>
<option value="018">018</option>
<option value="019">019</option>
</select>
</p>
<input type="submit">
</form>
</body>
</html>
size는 한번에 보여줄 수 있는 옵션의 개수, multiple은 컨트롤 키와 쉬프트 키를 이용하여 여러개 선택가능.
selected 는 처음 기본 선택이 설정되게.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
fileupload
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fileupload</title>
</head>
<body>
<form action="test.jsp" method="get" enctype="multipart/form-data">
<p><label>사진 : <input type="file" name="yourphoto"></label></p>
<input type="submit">
</form>
</body>
</html>
파일 업로드는 인코딩 타입을 이렇게 : enctype="multipart/form-data"
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
이미지 버튼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>inputimage</title>
</head>
<body>
<form action="test.jsp" method="get">
<p><label>Name : <input type="text"></label></p>
<p><input type="image" src="images/disk.png"></p>
<p><input type="submit" value="전송"></p>
<p><input type="reset" value="초기화"></p>
</form>
</body>
</html>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
hidden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hidden</title>
</head>
<body>
<form method="get" action="test.jsp">
<p><label>Name : <input type="text" name="irum"></label></p>
<p><input type="hidden" value="나 안보이지"></p>
<input type="submit">
</form>
</body>
</html>
hidden은 디스플레이 되지않음.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
number
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>number</title>
<script>
function test(){
alert(document.getElementById('yourage').value);
}
</script>
</head>
<body>
<form>
<p><label>Age : </label>
<input type="number" id="yourage" step="5" name="yourage">
</p>
<p><input type="button" value="확인" onclick="test()"></p>
</form>
</body>
</html>
오른쪽에 작은 화살표 생겨서 step 수 만큼 번호 +
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
datalist
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>datalist</title>
</head>
<body>
<form>
<input type="url" name="location" list="urls">
<datalist id="urls">
<option label="네이버" value="http://www.naver.com">
<option label="다음" value="http://www.daum.net">
<option label="구글" value="https://www.google.co.kr">
<option label="네이트" value="http://www.nate.com">
</datalist>
</form>
</body>
</html>
select와 같이 옵션이 아래로 쭈욱 나열됨. label이 나오고 선택하면 value가 나옴(브라우저마다 조금씩 다름).
사파리 안됨.
input type 의 url은 지원하는 브라우저가 없다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
지금까지 배운걸로 회원가입 ui
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>회원 가입</title>
<link rel="stylesheet" type="text/css" href="css/member.css">
</head>
<body>
<h1>회원가입</h1>
<form action="join.jsp" method="post">
<fieldset>
<legend>필수 입력 항목</legend>
<p><label>이름 : <input type="text" name="irum" placeholder="홍길동"
required autofocus></label></p>
<p><label>아이디 : <input type="text" name="userid" placeholder="Enter your ID"
required></label></p>
<p><label>패스워드 : <input type="password" name="passwd"
placeholder="반드시 패스워드 요망" required></label></p>
</fieldset>
<fieldset>
<legend>개인 정보</legend>
<p><label>성별 : </label>
<input type="radio" name="gender" value="male" id="male" checked="checked">
<label for="male">남자</label>
<input type="radio" name="gender" value="female" id="female">
<label for="female">여자</label></p>
<p><label>생년월일 : <input type="date"></label></p>
<p><label>주민등록번호 :
<input type="text" maxlength="6" size="6" name="jumin1"> -
<input type="text" maxlength="7" size="7" name="jumin2">
</label></p>
<p><label>휴대전화 :
<select name="hp1">
<option>--선택--</option>
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="017">017</option>
<option value="019">019</option>
</select>
<input type="tel" name="hp2" placeholder="1234-5678">
</label></p>
<p><label>주소 : <input type="text" size="100" name="address"></label></p>
<p><label>Email : <input type="email" placeholder="aaa@bbb.com"></label></p>
</fieldset>
<fieldset>
<legend>이메일 정보 수신</legend>
<p>
<input type="radio" id="ok" name="receivemail" value="ok">
<label for="ok">수신허용</label>
<input type="radio" id="cancel" name="receivemail" value="cancel">
<label for="cancel">수신거부</label>
</p>
</fieldset>
<fieldset>
<legend>추가 정보</legend>
<p><label>홈페이지 : <input type="url" name="homepi"></label></p>
<p><label>Blog : <input type="url" name="blog" list="blogurl"></label></p>
<datalist id="blogurl">
<option label="네이버 블로그" value="http://section.blog.naver.com/">
<option label="다음 블로그" value="http://blog.daum.net/">
<option label="티스토리" value="http://www.tistory.com/">
<option label="구글 블로그" value="http://google.blogspot.kr/">
</datalist>
</fieldset>
<fieldset>
<legend>관심 언어</legend>
<p><input type="checkbox" name="language" id="c-language" value="c-language">
<label for="c-language">C-language</label>
<input type="checkbox" name="language" id="Java"value="Java">
<label for="Java">Java</label>
<input type="checkbox" name="language" id="visualc++"value="visualc++">
<label for="visualc++">Visual C++</label>
</p>
<p><input type="checkbox" name="language" id=".net"value=".net">
<label for=".net">.NET</label>
<input type="checkbox" name="language" id="android"value="android">
<label for="android">Android</label>
<input type="checkbox" name="language" id="objectc"value="objectc">
<label for="objectc">Object-C</label>
</p>
</fieldset>
<p><label>자기 소개 : <textarea cols="100" rows="30"></textarea></label></p>
<!--<input type="submit" value="가입하기">
<input type="reset" value="취소하기">-->
<p><button type="submit">가입하기</button>
<button type="reset">취소하기</button>
</p>
</form>
</body>
</html>
member.css
body {
font-size:15pt;
}
label{
width:20pt;
background-color: yellow;
}
input+label{
width : 30pt;
}
인접해서나오는 것은 +로 표현함
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
practice1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>pageview table</title>
<link rel="stylesheet" href="formdemo.css">
</head>
<body>
<figure>
<figcaption><h2>판도라 TV의 순방문자수와 페이지뷰</h2></figcaption>
<table>
<col id="leftHead">
<col id="col1">
<col id="col2">
<col id="col3">
<thead>
<tr>
<th></th>
<th>2005년 6월</th>
<th>2006년 12월</th>
<th>성장율</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="rowgroup" rowspan="2">월 순방문자</th>
<td rowspan="2">386K</td>
<td rowspan="2">1,0984K</td>
<td>2,740%</td>
</tr>
<tr>
<td>월평균: 25%</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="rowgroup" rowspan="2">일 순방문자</th>
<td rowspan="2">19K</td>
<td rowspan="2">977K</td>
<td>4,989%</td>
</tr>
<tr>
<td>월평균: 27%</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="rowgroup" rowspan="2">월 페이지뷰</th>
<td rowspan="2">13,038K</td>
<td rowspan="2">936,160K</td>
<td>7,080%</td>
</tr>
<tr>
<td>월평균: 25%</td>
</tr>
</tbody>
</table>
<footer>
<p>
<span class="tableCode">표11 판도라TV의 순방문자수와 페이지뷰</span>
<span class="source">출처: 랭키닷컴</span>
</p>
</footer>
</figure>
</body>
</html>
style1.css
table {
border-collapse: collapse;
font-size : 15pt;
width : 700px;
}
thead{
background-color: #A6A6A6;
}
td, th {
border : 1px solid black;
text-align:center;
padding : 10px;
}
footer{
text-align:right;
}
#aaa{
text-align:left;
border-bottom-width:0px;
border-right-width:0px;
border-left-width:0px;
font-size:15px;
}
#bbb{
border-bottom-width:0px;
border-right-width:0px;
border-left-width:0px;
text-align:right;
font-size:15px;
}
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
practice2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pizza Ordering Form</title>
<link rel="stylesheet" href="pizzaorder.css">
</head>
<body>
<h1>Pizza Ordering Form</h1>
<form method="post" action="ordering.php">
<p>
<label class="custinput" for="name">Customer name:</label>
<input name="custname" id="name" required>
</p>
<p>
<label class="custinput" for="custtel">Telephone:</label>
<input type=tel name="custtel" id="custtel" placeholder="(031) 234-5678">
</p>
<p>
<label class="custinput" for="custemail">E-mail address:</label>
<input type=email name="custemail" id="custemail" placeholder="abcedf@thismail.com">
</p>
<fieldset>
<legend> Pizza Size </legend>
<p><label> <input type=radio name=size value="small"> Small </label></p>
<p><label> <input type=radio name=size value="medium"> Medium </label></p>
<p><label> <input type=radio name=size value="large"> Large </label></p>
</fieldset>
<fieldset>
<legend> Pizza Toppings </legend>
<p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
<p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
<p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
<p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
</fieldset>
<p><label>Preferred delivery time: <input type="time" min="11:00" max="21:00" step="900" name="delivery" required></label></p>
<p><label>Delivery instructions:<br><textarea name="comments" maxlength="1000"></textarea></label></p>
<p><button type="submit">Submit order</button><p>
</form>
</body>
</html>
pizzaorder.css
.custinput {
display: inline-block;
width: 120px;
}
.custinput+input {
display: inline-block;
width: 150px;
}
fieldset {
width: 250px;
}
textarea {
width: 270px;
height: 70px;
}
'Java & Oracle' 카테고리의 다른 글
| CSS 속성 , selector (0) | 2014.05.22 |
|---|---|
| HTML5 drag & drop, geolocation , storage, webworker, file api, web database (0) | 2014.05.21 |
| Applet (0) | 2014.05.19 |
| HTML5 tag, table (0) | 2014.05.15 |
| 이클립스 스탠다드 설치, Aptana Studio 설치, HTML5 (0) | 2014.05.14 |