Join.html
8.47 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>회원가입</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#datepicker").datepicker();
//여기 #은 id인데 <p>Date: <input type="text" id="datepicker"></p> 이렇게 넣을때
//type은 text id를 datepicker로 사용
});
</script>
<style>
.ui-widget-header {background:navy; color:#fff;}
.btn{width: 100px; height:50px; background: none; border:none; padding:0;}
/*크기 설정 해주고 background, border, padding을 none, 0으로 초기화*/
button img{width:90%;}/*부모(button)가 할당해준 값에서 최대치를 사용하도록 설정해서 button도 설정이 들어가게*/
</style>
</head>
<body>
<form action="#" method="POST">
<!-- 전송될 무언가는 반드시 form으로 감싸져야한다.,
이게 어디로 전송될지 action에 다음 스크립트 파일을 적어주면 된다.-->
<!--서버에 어떻게 전송할지에 대한 방법이 적혀야함(method) form옆에는 반드시 따라붙음 -->
<!-- post = 암호화, get 암호화x 주소표시줄에 같이 표시되서 묻어간다.-->
<!-- 개발자 도구에서 확인해보면 폼 옆에 메소드가 붙어있음 회원가입은 암호화해야하니까 post-->
<fieldset>
<!--필드셋으로 묶고 legend로 라벨링-->
<legend>필수 입력 사항</legend>
<p>
<label for="name">이름: </label>
<input id="name" type="text" name="username">
<!--name은 데이터베이스의 필드(애트리뷰트)명이다.-->
<!--이 경우 프로그래머끼리 협의를 보거나 백앤드 작업자를 위해 비워두고 커스텀하게 한다.-->
</p>
<!--패러그래프: tab의 역할을 한다.-->
<p>
<label for="email">이메일: </label>
<input id="email" type="email" name="useremail">
<!--input(사용자 입력 가능칸)은 label과 붙어 있어야 한다 이때 적절한 id를 주자 id==for 매치-->
<!-- input에는 type을 줄 수 있는데 이 type을 설정해서 우리가 원하는 형태로 데이터를 받을 수 있음 -->
<!-- email type을 걸면 브라우저가 이메일 형식 이외의 것을 차단함-->
</p>
<p>
<label for="password">비밀번호: </label>
<input id="password" type="password" name="userpassword">
<!--type password시에 가려서 나옴-->
</p>
</fieldset>
<fieldset>
<legend>선택 입력 사항</legend>
<p>
<label for="datepicker">생년월일: </label>
<input id="datepicker" type="date" name="userpassword">
<!--달력은 크롬이나 파폭에서는 type로 구현이 되어있는데 이번엔 jQuery 라이브러리로 활용해보자-->
<!--라이브러리를 쓰면 어느 환경에서든 같은 달력을 볼 수 있다. 기본을 쓰면 어느 브라우저는 안 나올 수도 있음-->
</p>
<p>
<span>거주지를 선택해주세요.</span>
<select name="user address"><!--미리 값이 있고 골라라 할때 사용-->
<option value ="" disabled>거주지를 선택해주세요</option> <!--이 경우 선택이 안댐-->
<option value="서울시">서울시</option>
<option value="경기도">경기도</option>
<option value="충청도">충청도</option>
<option value="제주도">제주도</option>
</select>
</p>
<p>
<span>취미는</span>
<label for="coding">코딩</label>
<input id="coding" type="checkbox" name="userinterest">
<label for="game">게임</label>
<input id="game" type="checkbox" name="userinterest">
<!--여기서 label input 연동을 안해두면 글씨를 클릭했을때는 체크가 되지 않는다.-->
</p>
<p>
<span>성별</span>
<label for="male">남성</label>
<input id="male" type="radio" value = "남성" name ="sex">
<label for="female">여성</label>
<input id="female" type="radio" value = "여성" name ="sex">
</p>
<p>
<span>기타 사항</span>
<textarea name ="usermessage"></textarea><!--크기가 자율적임-->
<textarea name ="usermessage" rows="10" cols="30"></textarea>
<!--저 <textarea>(이곳)<textarea>에 엔터가 들어가면 큰 공백이 들어가보임, 뭐 들어가면 안댐-->
<!--만약 저 사이에 긴 텍스트가 들어가면 스크롤로 자동 전환 된다.-->
<textarea name ="contract" readonly ="readonly" rows="10" cols="30">아파치 하둡은 대량의 자료를 처리할 수 있는 큰 컴퓨터 클러스터에서 동작하는 분산 응용 프로그램을 지원하는 프리웨어 자바 소프트웨어 프레임워크이다. 원래 너치의 분산 처리를 지원하기 위해 개발된 것으로, 아파치 루씬의 하부 프로젝트이다. 위키백과 작성 언어: 자바 최초 출시일: 2006년 4월 1일 개발자: 아파치 소프트웨어 재단 라이선스: 아파치 라이선스 2.0 안정화 버전: 3.0.0 / 2017년 12월 13일 종류: 분산 파일 시스템</textarea>
<!--위의 readonly 옵션을 주면 수정 불가. 저렇게 value값이 같을 경우 readonly로 생략가능-->
</p>
</fieldset>
<input type="submit" value="회원 가입" /> <!-- 전송해주는 형태 + value -> 안에 들어갈 값-->
<input type="reset" value="재작성" />
<input type="button" value="뒤로 가기" onclick="history.go(-1)"/>
<!-- input은 value에 있는 값이 나오고 button은 가운뎃값이 나온다.-->
<!--
<hr/>
<input class ="btn" type="image" src="send.png" alt="send"/>
<button class ="btn" type="submit"><img src="send.png" alt="send"></button>-->
<!-- input과 button의 이미지를 넣는 방식 두 개의 이미지가 다르다. button은 무조건
테두리(border, background)가 생기는데 이때 필요없을 경우css에서 없애야 한다.-->
</form>
<!--<fieldset>
<legend>CSS Test</legend>
<p style="color: blue">Lorem ipsum dolor.</p>-->
<!--Inline Style Sheet: 속성과 값만 들어감 꾸미는데 한계가 있고, 재사용 불가-->
<!--Internal Style Sheet: <style>(여기)</style>에 작성하는 방식
<style>
h1{
color : blue;
}
</style>
이러면 문서 안의 h1의 모든 요소가 파란색 글자를 가지게 된다.
보통 <head></head>사시에 넣으나 html 문서의 어디에 넣어도 적용이 잘 되며, 이 방법은 html 문서 안의
여러 요소를 한번에 꾸밀 수 있다는 장점이 있으나, 또 다른 html 문서에는 적용할 수 없다는 단점이 있다.
-->
<!--Linking Style Sheet: 별도로 CSS 파일을 만들고 html 문서와 연결하는 방법이다. 예를 들어 h1 요소의 글자를
빨간색으로 하고 싶다면, 다음의; 내용으로 style.css 파일을 만든다
style.css--------------
| h1{ |
| color: red; |
| } |
-----------------------.
이후 적용을 원하는 html 문서에
<link rel="stylesheet" href="style.css">
코드를 추가한다. 경로는 html과 같이 있을 경우 위처럼 쓰고
문서가 있는 폴더에 css 폴더가 있고, 그 안에 style.css 파일이 있다면 다음과 같이 해야한다.
<link rel="stylesheet" href="css/style.css">
-->
<!--</fieldset>-->
</body>
</html>