티스토리 뷰

부산 ITWILL 학원 실습/Web

form-1

김뽀삐. 2018. 8. 13. 15:09

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
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html>
    <head>
        <title>form-1</title>
    </head>
 
    <body>
        <hr>
         <h1>form과 form의 요소들</h1>
        <h2>form</h2>
        <p>
            form은 서버와 사용자 사이에 정보전달을 할 수 있도록 페이지를 구성할 수 있다.<br>
            from 태그 영역 안에 다양한 form 요소들로 입력공간, 선택요소 등을 만들어 주면<br>
            사용자가 정보를 입력하거나 선택해서 그 내용을 서버에 전달하게 된다.<br>
            action 속성으로 사용자에게 전달 받은 내용을 처리할 서버측 프로그램을 지정하고<br>
            method 속성으로 정보를 전달할 방식을 지정하는데 get/post 중에서 선택한다.<br>
            (get방식은 데이터의 양이 적고 보안방상의 문제가 없을 경우에 쓰고,<br>
            post방식은 데이터 양이 많으면서 보안상 노출 되지 않아야할 경우 일반적으로 쓴다.)
        </p>
        <form action = "test.jsp" method = "post">
            <input type = "text">
            <input type = "submit">
        </form>
 
        <h2>form의 요소들 - input으로 시작하는 요소</h2>
        <h3><input type = "text"> - 글자를 입력하는 한 줄 글상자</h3>
        size = n 속성으로 상자 크기를, maxlength = n 속성으로 입력 데이터의 최대 길이를 지정할 수 있다.<br>    
        <label for = "name">이 름</label> <input type = "text" id = "name"><br>
        <label for = "email">e-mail</label> <input type = "text" id = "email"><br><br>
 
        <h3><input type = "password"> - 비밀번호(보안상 화면에 노출 안될 내용)를 입력하는 한 줄 글상자</h3>
        size = n 속성으로 상자 크기를, maxlength = n 속성으로 입력 데이터의 최대 길이를 지정할 수 있다.<br>
        <label for = "pass">비밀번호</label> <input type = "password" id = "pass"><br>
 
        <label for = "snum1">주민번호(앞자리)</label> <input type = "text" id = "snum1" size = "7" maxlength = "8"> - 
        <label for = "snum2">(뒷자리)</label> <input type = "password" id="snum2" size = "7" maxlength = "7"><br><br><br>
 
        <h3><input type = "checkbox"> - 제시된 여러 항목 중에서 두 개 이상 선택 가능할 때. 체크박스.</h3>
        checked 속성으로 초기에 선택 항목을 지정할 수 있다.<br><br>
        자신있는 기술은?<br>
        <label for = "html">html</label> <input type = "checkbox" id = "html" name = "chk1" checked>
        <label for = "css">CSS</label> <input type = "checkbox" id = "css" name = "chk2">
        <label for = "javascript">Javascript</label> <input type = "checkbox" id = "javascript" name = "chk3" checked>
        <label for = "ora">Oracle</label> <input type = "checkbox" id = "ora" name = "chk4"><br><br><br>
 
        <h3><input type = "radio"> - 제시된 여러 항목 중에서 한개만 선택해야 할 때. 라디오 버튼</h3>
        (name 속성값을 같은 그룹끼리 일치시켜준다.)<br>
        checked 속성으로 초기에 선택 항목을 지정할 수 있다.<br><br>
        수강중인 강의실은?<br>
        <label for = "cla2">2강</label> <input type = "radio" id = "cla2" name = "class">
        <label for = "cla4">4강</label> <input type = "radio" id = "cla4" name = "class">
        <label for = "cla6">6강</label> <input type = "radio" id = "cla6" name = "class">
        <label for = "cla7">7강</label> <input type = "radio" id = "cla7" name = "class" checked><br><br>
 
        보충학습을 원하는 과목을 한가지 선택하세요<br>
        <label for = "web">Web</label> <input type = "radio" id = "web" name = "mo" checked>
        <label     for = "app">Application</label> <input type = "radio" id = "app" name = "mo">
        <label for = "job">직업기초</label> <input type = "radio" id = "job" name = "mo">
        <label for = "java">Java</label> <input type = "radio" id = "java" name = "mo"><br><br>
 
        <h3><input type = "button"> - 일반적인 버튼.</h3>
        value 속성으로 버튼에 보이는 글자를 지정한다.<br>
        <input type = "button" value = "클릭" onclick = "alert('닫으소')"><br><br>
 
        <h3><input type = "submit"> - 사용자가 입력한 내용을 전송하는 전송 버튼.</h3>
        value 속성으로 버튼에 보이는 글자를 지정한다.<br>
        <input type = "submit" value = "가입하기"><br><br>
 
        <h3><input type = "reset"> - 사용자가 입력한 내용을 모두 삭제하는 초기화 버튼. value 속성으로 버튼에 보이는 글자를 지정한다.</h3>
        <input type = "reset" value = "다시 쓰기"><br><br>
 
        <h3><input type="image" src="img_submit.gif"> - 이미지로 전송버튼을 대신 함.</h3>
        src 속성으로 이미지를 지정한다.<br>
        <input type="image" src="img_submit.gif"><br><br>
 
         <h3><input type = "hidden"> - 사용자에게는 안보이는 어떤 정보를 서버에 전달할 때. 히든<h3>
        <input type = "hidden"  value = "vip"><br><br>
 
        <h3><input type = "file"> - 파일을 첨부할 때. 파일 선택</h3>
        <input type = "file"><br><br>
 
        <h2>form의 요소를 설명하는 글자 - label 태그</h2>
        <p>
            사용자에게 해당 폼 요소가 어떤 내용인지를 설명하는 텍스트를 <label> ... </label>로 표현한다.<br>
            label 태그는 for 속성의 속성값을 지정하고 그 속성값을 폼요소의 id값과 일치시키면 서로 연결이 된다.<br>
            (위치가 떨어져 있어도 가능)<br>
            <label for="abc"> ... </label> <input type="text" id="abc">
        </p>
 
        <h2>form의 요소들 - 기타 요소</h2>
        <h3><textarea> ... </textarea> - 많은 내용을 입력할 수 있는 여러 줄 글상자</h3>
        글상자의 가로 크기는 cols=n로 지정하고, 세로 크기는 rows=n로 지정한다.<br>
        <textarea cols = "100" rows = "6">textarea(여러줄) 글상자 입니다.
            자기소개를 해볼까요?
        </textarea><br><br>
 
        <h3>select - 펼침목록(드롭다운 메뉴)</h3>
        <pre> select는 제시된 여러 항목을 펼침 목록 형태로 만들어 사용자가 고르게 함. 공간 절약형
            <<b>select</b>>
                <<b>option</b>> ... <<b>/option</b>>
                <option> ... </option>
                <option> ... </option>
            <<b>/select</b>>
        </pre>
 
        <br>
 
        <p>
            select는 세부 항목을 묶어서 그룹으로 나타낼 수 있다.<br>
            optgroup 태그로 여러 항목을 묶어주고 label 속성으로 옵션 그룹의 대표 제목을 준다.<br>
            label로 지정한 제목은 그룹의 상단에 나타나며 선택은 안됨
        </p>
 
        <pre>
            <select name="more">
                <<b>optgroup label</b>="web">
                <option value="html">Html5</option>
                <option selected>CSS3</option>
                <option>Javascript</option>
                <<b>/optgroup</b>>
            </select>
        </pre>
 
        <select name="more">
            <optgroup label="web">
                <option value="html">Html5</option>
                <option selected>CSS3</option>
                <option>Javascript</option>
            </optgroup>
            <optgroup label="ect">
                <option>Java</option>
                <option>Oracle</option>
                <option>직업기초</option>
            </optgroup>
        </select>
 
        <h4>select의 여러 속성</h4>
        <ul>
            <li><mark>size=n</mark> 속성 - 여러 항목이 보이는 박스 형태로 바꾸기</li>
            <li><mark>multiple</mark> 속성 - 두개 이상의 항목이 선택 가능하게 함</li>
            <li>세부항목 <i>option의 속성 - selected</i>를 추가하면 해당 항목이 먼저 보임</li>
        </ul>
 
        <select size="4" multiple>
            <!--<optgroup label="q20">-->
                <option>html</option>
                <option>browser</option>
                 <option selected>웹표준</option>
                <option>웹호환성</option>
                <option>하이퍼링크</option>
                <option>시멘틱웹</option>
                <option>플로우차트</option>
            <!--</optgroup>-->
        </select>
 
    </body>
</html>
cs











저작자표시 비영리 변경금지

'부산 ITWILL 학원 실습 > Web' 카테고리의 다른 글

연습해보기  (0) 2018.08.14
form-2  (0) 2018.08.13
테이블 셀 합치기 최종 문제  (0) 2018.08.13
table로 표 만들기  (0) 2018.08.13
test01.htm  (0) 2018.08.13
공지사항
최근에 올라온 글
링크
Total
Today
Yesterday