2021/01/05 - [공부/자바 융합개발] - [자바 기초] 15일차 일지 1 - 화면(UI)구현(Ch4. 멀티미디어 태그)
2021/01/05 - [공부/자바 융합개발] - [자바 기초] 15일차 일지 2 - 화면(UI)구현(Ch5. 입력 양식 태그와 공간 분할 태그)
02 입력 양식 태그
1. 제출/초기화 양식
제출 양식
- 입력 데이터를 처리하기 위한 버튼 정의
- 폼 태그의 action 속성에 지정된 파일로 값 전송
예제 5-3 제출 양식 만들기 ch05/03_submit.html
- input type은 반드시 form이 존재
- submit은 action이 붙는다?
<body>
<h2>입력 양식 데이터 전송 버튼</h2>
<form action="page.jsp" method="get">
<p>이름 : <input type="text" name="name"></p> <!-- name=""해서 속성 값을 받는 것은 입력값을 받아서 서버로 넘기려고!, 지금은 값 받아서 안넘길 거니까 안써도 됨 -->
<p>학과 : <input type="text" name="major"></p>
<p></p>
<input type="submit" value="전송">
</form>
</body>
초기화 양식
- 폼에 입력한 데이터 모두 초기화
- reset의 범위는 form 안의 내용임
예제 5-4 초기화 양식 만들기 ch05/04_reset.html
<body>
<h2>입력 데이터 초기화 버튼</h2>
<form action="page.jsp" method="get">
<p>이름 : <input type="text" name="name"></p>
<p>학과 : <input type="text" name="major"></p>
<p></p>
<input type="submit" value="전송">
<input type="reset" value="다시작성">
</form>
</body>
2. 텍스트/비밀번호 입력 양식
텍스트 입력 양식
- 기본적인 텍스트를 입력할 때 사용
예제 5-5 텍스트 입력 양식 만들기 ch05/05_text.html
<body>
<h2>문자 입력 양식</h2>
<form>
<p>이름 : <input type="text" name="name" size="10"></p> <!-- size 10자를 제한해서 받을 것이다 -> 그러나 보통은 서버에서 제한 걸 것 -->
<p>학번 : <input type="text" name="name" size="10" value=""></p> <!-- value 기본값 지정 -->
<p>학과 : <input type="text" name="school" value="컴퓨터과학과"></p>
<p></p>
<input type="submit" value="전송">
<input type="reset" value="다시작성">
</form>
</body>
입력 : 영어를 받아야 하는데 영어, 한자, 숫자, 전화번호 등 다른 것들로 잘못 입력받으면 안 됨 -> 웬만해서는 회원가입 하는 것 이외에는 입력 안받으려고 하고 나머지는 선택하게끔 함
비밀번호 입력 양식
- 사용자가 입력한 문자를 보이지 않게 ‘〮〮〮’으로 처리
예제 5-5 비밀번호 입력 양식 만들기 ch05/06_password.html
<body>
<h2>회원 인증 입력 양식</h2>
<form>
<p>ID : <input type="text" name="ID" size="15" required></p>
<p>PW : <input type="password" name="psw" size="15" placeholder="비밀번호" required></p>
<p></p>
<input type="submit" value="전송">
<input type="reset" value="다시작성">
</form>
</body>- placeholder => 비밀번호 입력하는 곳이라고 알려줌
3. 텍스트 공간 입력/필드셋 양식
텍스트 공간 입력 양식
- 텍스트를 여러 줄에 걸쳐 자유롭게 입력 가능
예제 5-7 텍스트 공간 입력 양식 만들기 ch05/07_textarea.html
<body>
<h2>텍스트 공간 입력 양식</h2>
<form>
<textarea rows="5" cols="50">텍스트를 작성하는 공간입니다.</textarea>
<p></p>
<input type="submit" value="전송">
<input type="reset" value="다시작성">
</form>
</body>textarea는 5줄, 50칸을 쓰겠다.
<fieldset> 태그
- 입력 폼이 여러 개 있을 때, 경계선을 그려서 하나의 그룹으로 만들 때 사용
예제 5-8 입력 폼 그룹으로 묶기 ch05/08_fieldset.html
<body>
<form>
<fieldset>
<legend>개인 정보 입력</legend>
<p>이름 : <input type="text" name="name"></p>
<p>학교 : <input type="text" name="school"></p>
<input type="submit" value="제출">
<input type="reset" value="다시작성">
</fieldset>
</form>
</body>fieldset, legend는 디자인에 많이 활용
4. 라디오/체크박스/버튼 양식
라디오 입력 양식
- 여러 항목 중 하나만 선택할 때 사용 -> 복수선택 X -> sex, year 이렇게 두 묶음(묶어주는 이름이 같아야 함)
예제 5-9 라디오 양식 만들기 ch05/09_radio.html
<body>
<form>
<h3>당신의 성별은 무엇입니까?</h3>
<input type="radio" name="sex" value="male" checked>남자
<input type="radio" name="sex" value="female">여자
<p></p>
<h3>당신은 몇 학년입니까?</h3>
<input type="radio" name="year" value="1" checked>1학년
<input type="radio" name="year" value="2">2학년
<input type="radio" name="year" value="3">3학년
<input type="radio" name="year" value="4">4학년
<p></p>
<input type="submit" value="제출">
<input type="reset" value="다시작성">
</form>
</body>
value는 내부값이고 보여지는 건 <>밖에 있는 부분
우리는 1학년을 선택하지만 내부적으로는 1값을 가진다.
체크박스 양식
- 동시에 여러 항목을 선택할 때 사용
예제 5-10 체크박스 양식 만들기 ch05/10_checkbox.html
- 4개의 체크박스가 subject라는 이름으로 묶인다(같은 이름으로 묶어줘야 함)
<body>
<form>
<h3>현재 관심을 가지고 있는 학습 주제는 무엇입니까?</h3>
<input type="checkbox" name="subject" value="HTML5" checked>HTML5 <br>
<input type="checkbox" name="subject" value="CSS3">CSS3 <br>
<input type="checkbox" name="subject" value="Javascript">Javascript <br>
<input type="checkbox" name="subject" value="Jquery">Jquery
<p></p>
<input type="submit" value="제출">
<input type="reset" value="다시작성">
</form>
</body>내부값 value를 표시되는 이름과 같이 설정 해놓은 것
버튼 양식
- <button> 태그 혹은 <input> 태그를 사용하여 정의
예제 5-11 버튼 양식 만들기 ch05/11_button.html
<body>
<form>
<h3>Button 태그 사용</h3>
<button type="button" onclick="alert('클릭-1 사용')">클릭-1</button>
<h3>Input 태그 사용</h3>
<input type="button" onclick="alert('클릭-2 사용')" value="클릭-2">
<h3>Image 버튼 사용</h3>
<button type="button" onclick="alert('클릭-3 사용')"><img src="button.jpg"></button>
</form>
</body>
5. 선택 목록 양식
선택 목록(select 안에 option들이 들어감 -> 묶음으로 select name="대표이름"으로 묶음)
- 펼침 목록에서 한 가지만 선택할 수 있도록 지원하는 양식
예제 5-12 선택 목록 양식 만들기 ch05/12_select1.html
<body>
<h3>관심 있는 학습 주제 한 가지를 선택하세요.</h3>
<form>
<select name="subjects">
<option value="1" selected>HTML5</option> <!-- checked와 구별 -->
<option value="2">CSS3</option>
<option value="3">Javascript</option>
<option value="4">Jquery</option>
</select>
<p></p>
<input type="submit" value="제출">
<input type="reset" value="다시작성">
</form>
</body>
- 하나를 선택했을 때,
다중 선택
- Multiple속성 사용 -> select의 변형판
ch05/12_select2.html
<body>
<h3>관심 있는 학습 주제를 모두 선택하세요.</h3>
<form>
<select name="subjects" size="4" multiple>
<option value="1" selected>HTML5</option>
<option value="2">CSS3</option>
<option value="3">Javascript</option>
<option value="4" selected>Jquery</option>
</select>
<p></p>
<input type="submit" value="제출">
<input type="reset" value="다시작성">
</form>
</body>
여러 개 선택하고 제출 누르고 싶으면
ctrl 누른 채로 여러 개 선택
<optgroup> 태그
- 여러 항목을 그룹으로 묶을 수 있음
ch05/12_select3.html
<body>
<h3>그룹별 선택 항목을 제공합니다.</h3>
<form>
<label>전공 분야를 선택하세요.
<select name="major">
<optgroup label="computer">
<option>Software</option>
<option>Robot</option>
<option>System</option>
</optgroup>
<optgroup label="language">
<option selected>Korea</option>
<option>English</option>
<option>China</option>
<option>Germany</option>
</optgroup>
<optgroup label="business">
<option>Service</option>
<option>Education</option>
<option>Communication</option>
<option>Marketing</option>
</optgroup>
</select>
<p></p>
<input type="submit" value="선택">
<input type="reset" value="다시선택">
</label>
</form>
</body>
전체 select가 하나 있고 안에 group이 3개
<datalist> 태그 -> 앞에서는 value가 보이지 않았는데 여기서는 value를 보여줌
- 텍스트 입력 시 자동완성 기능 제공
ch05/12_select4.html
<body>
<h3>선택사항을 직접 입력하세요.</h3>
<form>
<label>전공 분야를 입력하세요.
<input type="text" list="majorlist" name="major">
<datalist id="majorlist">
<option value="Software">소프트웨어</option>
<option value="Robot">로봇</option>
<option value="System">시스템</option>
<option value="Service">서비스</option>
<option value="Education">교육</option>
</datalist>
<p></p>
<input type="submit" value="완료">
<input type="reset" value="다시작성">
</label>
</form>
</body>
6. 날짜와 시간 양식
<input type="data"> 입력 폼
- 년-월-일 단위로 원하는 날짜 입력할 수 있음
예제 5-13 날짜/시간 양식 만들기 ch05/13_date1.html
<body>
<form>
<h3>오늘 날짜 입력</h3>
Today : <input type="date" name="today">
<h3>프로젝트 수행 기간</h3>
From : <input type="date" name="from" min="2016-03-01" max="2016-12-31">
To : <input type="date" name="to" min="2018-03-01" max="2018-06-30">
<p></p>
<input type="submit" value="제출">
<input type="reset" value="다시작성">
</form>
</body>
type 속성값
- month : 년-월 단위로 날짜 입력
- week : 년-주 단위로 날짜 입력
ch05/13_date2.html
<body>
<form>
<h3>생일(년/월) 입력</h3>
생일 : <input type="month" name="birth">
<h3>주간 계획(년/주) 입력</h3>
주간 계획 : <input type="week" name="weekeend">
<p></p>
<input type="submit" value="제출">
<input type="reset" value="다시작성">
</form>
</body>
- time : 시간만 입력
- datetime : 년-월-일-시간 단위로 입력
ch05/13_time.html
<body>
<form>
<h3>현재 시간 입력</h3>
Time : <input type="time" name="Now">
<h3>생일(년도, 월, 일, 시간) 입력</h3>
Birthday : <input type="datetime-local" name="bdaytime">
<p></p>
<input type="submit" value="제출">
<input type="reset" value="다시작성">
</form>
</body>연, 월, 일, 시간 다 하려면 : datetime-local
7. 색상 선택 / 숫자 입력 / 범위 지정 양식
<input type=“color”> 입력 폼
- 색상 칩에서 원하는 색상을 선택할 수 있음
예제 5-14 색상 선택 양식 만들기 05/14_color.html
<body>
<form>
<h3>원하는 색상을 선택하세요.</h3>
<input type="color" name="color_value" value="#0000ff">
<p></p>
<input type="submit" value="선택완료">
<input type="reset" value="다시선택">
</form>
</body>
우리가 색을 선택하면 값을 가져오는 것을 할 줄 알아야 한다.
#00|00|00
R G B
2^4이
2^4 = 16진수(한 글자로 0~15까지 표현 가능)
<input type=“number”> 입력 폼
- 숫자를 입력할 수 있음
예제 5-15 숫자 입력 양식 만들기 ch05/15_number.html
<body>
<form>
<h3>나이를 입력하세요.</h3>
<input type="number" name="count" min="1" max="130">
<p></p>
<input type="submit" value="완료">
<input type="reset" value="초기화">
</form>
</body>
<input type=“range”> 폼
- 특정 범위의 숫자를 선택할 때 사용
예제 5-16 범위 지정 양식 만들기 ch05/16_range.html
<body>
<form>
<h3>0~100 범위에서 원하는 지점을 선택하세요.</h3>
<input type="range" name="point" min="0" max="100">
<p></p>
<input type="submit" value="완료">
<input type="reset" value="초기화">
</form>
</body>
지금은 선택해도 그 값을 불러올 수 없음 -> javascript에서 해야함
8. 이메일/URL/검색어 입력 양식
이메일 입력 양식
- 텍스트 상자와 외형은 같지만 이메일 형식에 맞게 정확하게 작성하지 않으면 경고 메시지가 나타남
예제 5-17 이메일 입력 양식 만들기 ch05/17_email.html
<body>
<form>
<h3>이메일을 정확하게 입력하세요.</h3>
이메일 : <input type="email" name="myemail">
<p></p>
<input type="submit" value="제출">
<input type="reset" value="다시작성">
</form>
</body>
URL 입력 양식
- 입력한 URL이 http://로 시작하지 않는 등 형식에 맞지 않는다면 새로 입력하라는 메시지가 나타남
예제 5-18 URL 입력 양식 만들기 ch05/18_url.html
<body>
<form>
<h3>홈페이지 주소를 입력하세요.</h3>
홈페이지 : <input type="url" name="myhome">
<p></p>
<input type="submit" value="제출">
<input type="reset" value="다시작성">
</form>
</body>
검색 양식
- 검색어를 입력할 때 사용
- 예제 5-19 검색어 입력 양식 만들기 ch05/19_search.html
<body>
<form>
<h3>검색어를 입력하세요.</h3>
구글검색 : <input type="search" name="googlesearch">
<p></p>
<input type="submit" value="제출">
<input type="reset" value="다시작성">
</form>
</body>
9. 막대 그래프 양식
<meter> 태그
- 지정된 값을 표현하기 위해 사용
<progress> 태그 -> 점진적(움직이는 동적 효과 구현) - javascript + sjp 섞어서
- 다운로드 상태 표시 같이 현재 진행율이 어떻게 되고 있는지를 나타낼 때 사용
- 예제 5-20 막대 그래프 양식 만들기 ch05/20_meter.html
<body>
<form>
<h3>학습량 그래프</h3>
홍민성 : <meter min="0" max="100" optimum="50" value="60">60 out of 100</meter><br>
송지효 : <meter low="0.3" hign="0.5" value="0.22">22%</meter><br>
이민정 : <meter low="0.25" high="0.75" optimum="0.8" value="0.2">20%</meter>
<p></p>
<h3>작업 진행율</h3>
초기 작업 : <progress value="22" max="100" title="진행율">22%</progress><br>
중간 작업 : <progress value="0.77" max="1">77%</progress><br>
다음 작업 : <progress value="0.98" max="1">98%</progress><br>
</form>
</body>optimum -> 범위에서 최적의 값
10. 입력 양식의 주요 속성
읽기 전용 속성 : readonly
- 텍스트 상자에 쓰기를 제한하고 오직 읽기만 가능하게 설정 -> 쓰기 안됨
비활성화 속성 : disabled
- 텍스트 상자를 비활성화 시킴 -> 값을 미리 정해놓고 입력 안되도록 함
자동 완성 속성 : autocomplete
- 사용했던 데이터를 기준으로 입력 중인 텍스트에 자동 완성 기능을 적용할 수 있음
자동 포커스 속성 : autofocus
- 현재 페이지가 로드될 때 처음으로 입력하고자 하는 폼을 선택하는 속성
플레이스 홀더 속성 : placeholder
- 현재 폼에 입력해야 하는 텍스트를 희미하게 보여주는 속성
필수 입력 속성 : required
- 반드시 데이터가 입력되어야 하는 폼을 지정하는 속성
오타 체크 속성 : spellcheck
- 입력되는 문장의 오타를 실시간으로 점검
예제 5-21 공통 속성 사용하기 ch05/21_newattr.html
<body>
<h2>HTML5 입력 양식의 주요 속성을 연습해 봅시다.</h2>
<form>
<p>쓰기가능 : <input type="text" name="name" size="20" placeholder="이름을 입력하세요" autofocus></p>
<p>읽기전용 : <input type="text" name="name" size="10" readonly></p>
<p>사용안함 : <input type="text" name="name" size="10" disabled></p>
<p>자동완성 : <input type="text" name="name" size="10" autocomplete="on" required></p>
<textarea cols="50" rows="3" spellcheck="true">오타를 체크합니다.</textarea>
<p></p>
<input type="submit" value="전송">
<input type="reset" value="다시작성">
</form>
</body>
'프로그래밍 > 자바(java) 융합개발자 2차' 카테고리의 다른 글
| [자바 기초] 16일차 일지 2 - Ch6. CSS3 기본 사용법과 선택자 (0) | 2021.01.06 |
|---|---|
| [자바 기초] 16일차 일지 1 - 화면(UI)구현(Ch6. 공간 분할 태그) (0) | 2021.01.06 |
| [자바 기초] 15일차 일지 2 - 화면(UI)구현(Ch5. 입력 양식 태그와 공간 분할 태그) (0) | 2021.01.05 |
| [자바 기초] 15일차 일지 1 - 화면(UI)구현(Ch4. 멀티미디어 태그) (0) | 2021.01.05 |
| [자바 기초] 14일차 일지 2 - 화면(UI)구현(Ch4. 기본 태그) (0) | 2021.01.04 |