웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)
form 본문
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>사용자와의 상호작용을 이끌어내는 폼 디자인</title>
</head>
<body>
<h1><abbr title="Hyper Text Markup Language">HTML</abbr> Forms Design</h1>
<p>Donec nec justo eget felis facilisis fermentum.
Aliquam porttitor mauris sit <a href="form_get.php?name=jeehoon&nick=yamoo9">amet</a> orci. Aenean dignissim pellentesque felis.</p>
<!--
폼 구성요소: 폼 내용을 구성하는 요소들
보험가입을 한다면?
보험 가입양식 서류를 양식에 맞춰 작성한 후...
name 어떤 양식??? 보험 탈퇴
action 누군가에게??? 보험 아줌마에게 준다.
method 어떻게???? 퀵??? 우편발송, (등기 | 일반)
Method 방식 GET VS POST
동일한 폴더 내에 있는 login.php 에게....
-->
<form name="login" action="login.php" method="get">
<!--
input 종류(유형)
- text
- password
- radio
- checkbox
- button
- submit
- reset
- image
- file
- hidden
AJAX
-->
<p>아이디 : <input type="text" value="아이디를 넣어주세요" maxlength="5"></p>
<p>비밀번호 : <input type="password" maxlength="10"></p>
<!-- radio input ?gender=e -->
<p>당신의 성별은?<br>
<input name="gender" value="g" type="radio">남자
<input name="gender" value="l" type="radio" checked="checked">여자
<input name="gender" value="e" type="radio">기타</p>
<!-- checkbox ?wish_phone=i -->
<p>당신이 구매하고 싶은 차세대 스마트폰은?<br>
<input name="wish_phone" value="i" type="checkbox" checked="checked"> 아이폰
<input name="wish_phone" value="a" type="checkbox"> 안드로이드폰
<input name="wish_phone" value="w" type="checkbox"> 윈도우폰
</p>
<!-- button
역할: 스크립트에서 필요한 기능을 구현하고자 할 때 활용.
-->
<input name="show_message" type="button" value="show message!">
<!-- image
<img src="" alt="">
-->
<input type="image" src="./img/daum_coffee.png" alt="다음 커피 마시러 오세요!">
<!-- reset
역할: 사용자 입력 내용 초기화
-->
<input type="reset" value="초기화">
<!-- hidden -->
<input type="hidden" name="supportAJAX" value="not">
<!-- submit
역할: 전송버튼
-->
<input type="submit" value="전송">
</form>
<form name="file_upload" action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="upload">
</form>
<script type="text/javascript">
document.login.show_message.onclick = function() {
alert('show messaeg');
}
</script>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>사용자와의 상호작용을 이끌어내는 폼 디자인</title>
</head>
<body>
<h1><abbr title="Hyper Text Markup Language">HTML</abbr> Forms Design</h1>
<p>Donec nec justo eget felis facilisis fermentum.
Aliquam porttitor mauris sit <a href="form_get.php?name=jeehoon&nick=yamoo9">amet</a> orci. Aenean dignissim pellentesque felis.</p>
<!--
폼 구성요소: 폼 내용을 구성하는 요소들
보험가입을 한다면?
보험 가입양식 서류를 양식에 맞춰 작성한 후...
name 어떤 양식??? 보험 탈퇴
action 누군가에게??? 보험 아줌마에게 준다.
method 어떻게???? 퀵??? 우편발송, (등기 | 일반)
Method 방식 GET VS POST
동일한 폴더 내에 있는 login.php 에게....
-->
<form name="login" action="login.php" method="get">
<!--
input 종류(유형)
- text
- password
- radio
- checkbox
- button
- submit
- reset
- image
- file
- hidden
AJAX
-->
<p>아이디 : <input type="text" value="아이디를 넣어주세요" maxlength="5"></p>
<p>비밀번호 : <input type="password" maxlength="10"></p>
<!-- radio input ?gender=e -->
<p>당신의 성별은?<br>
<input name="gender" value="g" type="radio">남자
<input name="gender" value="l" type="radio" checked="checked">여자
<input name="gender" value="e" type="radio">기타</p>
<!-- checkbox ?wish_phone=i -->
<p>당신이 구매하고 싶은 차세대 스마트폰은?<br>
<input name="wish_phone" value="i" type="checkbox" checked="checked"> 아이폰
<input name="wish_phone" value="a" type="checkbox"> 안드로이드폰
<input name="wish_phone" value="w" type="checkbox"> 윈도우폰
</p>
<!-- button
역할: 스크립트에서 필요한 기능을 구현하고자 할 때 활용.
-->
<input name="show_message" type="button" value="show message!">
<!-- image
<img src="" alt="">
-->
<input type="image" src="./img/daum_coffee.png" alt="다음 커피 마시러 오세요!">
<!-- reset
역할: 사용자 입력 내용 초기화
-->
<input type="reset" value="초기화">
<!-- hidden -->
<input type="hidden" name="supportAJAX" value="not">
<!-- submit
역할: 전송버튼
-->
<input type="submit" value="전송">
</form>
<form name="file_upload" action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="upload">
</form>
<script type="text/javascript">
document.login.show_message.onclick = function() {
alert('show messaeg');
}
</script>
</body>
</html>