2023.10.12
Day39 네 줄 요약
<form> 태그로 입력받은 값들을 특정 주소로 넘길 수 있다.
<input type="button"> 태그와 달리 <button> 태그는 누름과 동시에 submit이 일어난다.
URL에서 '?' 뒤에서 부터 query 시작, 'key=value' 형태로 구성 (구분 기호는 '&')
자주 사용하는 선택자에는 1) 전체, 2) 태그, 3) 클래스, 4) 아이디 선택자가 있다.
입력 태그
<form> 태그
<input> 태그를 감싸서 특정 주소로 선택 값들을 전송하는 역할
- 주소창에 정보를 표시할 땐 method="get" (default)
- 주소창에 정보를 표시하지 않을 땐 method="post"
submit 발생 시에 <input> 태그의 값들을 action 속성에 적힌 주소로 전송
- key=value 형태로 전송
- name 속성 : key 값
- value 속성(or tag 내용) : value 값
<input> 태그
* type 속성 종류
1) text : 문자 입력
2) password : 문자 입력 -> 특수 문자로 대체
- <label> 태그의 내용을 클릭하면 커서가 input 창으로 이동
3) button : 클릭 버튼
4) radio : 선택 (하나의 선택만 허용, 반드시 선택해야 함)
5) checkbox : 다중 선택 (선택 없음 허용)
6) hidden : 숨김 정보
- form에 전송되지만 웹 페이지 상에서는 보이지 않음
- 고유 보안 토큰 등을 서버로 보낼 때 주로 사용
7) file : 파일 형태 (클릭시 파일 선택창 활성화)
8) color : 특정 컬러 선택
9) date : 날짜 입력 (yyyy-MM-dd)
10) email : 이메일 입력 (@를 작성하지 않으면 오류 메세지 실행, submit 발생 시 확인)
11) <select> 태그 : <option> 태그와 짝꿍, submit 발생 시에 넘어가는 값은 value 속성에 저장된 값
12) reset : 저장된 data clear
13) submit : 저장된 data 전송
<form> 태그의 주소로 input 값들을 전송(submit)
주소창에서 확인 가능 (method="get"인 경우)
source code
<body>
<form action="https://www.icia.co.kr" method="get">
<br /><br />
<fieldset>
<legend>text & password</legend>
<p>텍스트와 비밀번호 타입</p>
<label>아이디 : <input type="text" name="id" id="id" /></label><br />
<label> 비밀번호 : <input type="password" name="pw" id="pw" /></label>
</fieldset><br /><br />
<fieldset>
<legend>button</legend>
<p>버튼 타입</p>
<input type="button" value="버튼1" onclick="alert('버튼을 클릭했습니다.')" />
<input type="button" value="버튼2" onclick="btnMethod()" />
</fieldset><br /><br />
<fieldset>
<legend>radio</legend>
<p>라디오 버튼 타입</p>
남성 <input type="radio" name="gender" value="남" />
여성 <input type="radio" name="gender" value="여" />
<br /><br />
<p>커피 메뉴 선택</p>
아메리카노 <input type="radio" name="coffee" value="아메리카노" />
카페라테 <input type="radio" name="coffee" value="카페라테" />
바닐라라테 <input type="radio" name="coffee" value="바닐라라테" />
자몽허니블랙티 <input type="radio" name="coffee" value="자몽허니블랙티" />
</fieldset><br /><br />
<fieldset>
<legend>checkbox</legend>
<p>체크박스 타입</p>
좋아하는 과목을 선택해주세요 : <br />
<input type="checkbox" name="subject" value="java" />Java
<input type="checkbox" name="subject" value="db" />Database
<input type="checkbox" name="subject" value="jdbc" />JDBC
<input type="checkbox" name="subject" value="html" />HTML
<input type="checkbox" name="subject" value="css" />Css
<input type="checkbox" name="subject" value="javaScript" />JavaScript
</fieldset><br /><br />
<fieldset>
<legend>hidden</legend>
<p>숨김 정보</p>
<input type="hidden" name="hiddenValue" value="숨김정보" />
</fieldset><br /><br />
<fieldset>
<legend>file</legend>
<p>파일 업로드</p>
<input type="file" name="fileUpload" />
</fieldset><br /><br />
<fieldset>
<legend>color</legend>
<p>색상 타입</p>
<input type="color" name="color1" />
</fieldset><br /><br />
<fieldset>
<legend>date</legend>
<p>날짜 타입</p>
출국일 : <input type="date" name="date1" />
입국일 : <input type="date" name="date2" />
</fieldset><br /><br />
<fieldset>
<legend>email</legend>
<p>이메일 타입</p>
<input type="email" name="email1" />
</fieldset><br /><br />
<fieldset>
<legend>select</legend>
<p>선택 버튼</p>
<select name="myCar">
<option value="hd">현대</option>
<option value="kia">기아</option>
<option value="audi">아우디</option>
<option value="bmw">BMW</option>
<option value="tesla">테슬라</option>
</select>
</fieldset><br /><br />
<fieldset>
<legend>submit & reset</legend>
<p>전송(제출)과 새로(다시) 작성</p>
<input type="submit" value="전송" />
<input type="reset" value="다시작성" />
</fieldset><br /><br />
</form>
</body>
<script>
function btnMethod() {
location.href = "https://www.google.com"
}
</script>
검색 기능 태그
URL 해석
물음표 기호('?')는 그 뒤에서 부터 query가 시작됨을 알리는 표시
qurey 표현식은 'key=value' 형태이며, '&' 기호로 구분됨
<input> 태그의 'name' 속성의 값을 key 값으로 가져가고, 태그의 내용을 value 값으로 가져감
- ex) .../serch.naver?ie=UTF-8&query=icia&...
: ie(key)=UTF-8(value), query(key)=icia(value), ...
source code
<body>
<fieldset>
<legend>네이버 검색</legend>
<!-- https://search.naver.com/search.naver
?
ie=UTF-8
&
query=icia
&
sm=chr_hty -->
<form action="https://search.naver.com/search.naver">
<input type="text" name="query"/>
<input type="submit" value="검색"/>
</form>
</fieldset>
<fieldset>
<legend>Google 검색</legend>
<!-- https://www.google.com/search
?
q=icia
&
oq=icia
&
gs_lcrp=EgZjaHJvbWUqCggAEAAY4wIYgAQyCggAEAAY4wIYgAQyDQgBEC4YrwEYxwEYgAQyBwgCEAAYgAQyBwgDEAAYgAQyBggEEEUYPDIGCAUQRRg8MgYIBhBFGDwyBggHEEUYPNIBCDEwNDZqMGo0qAIAsAIA
&
sourceid=chrome
&
ie=UTF-8 -->
<form action="https://www.google.com/search">
<input type="text" name="q"/>
<input type="submit" value="검색"/>
</form>
</fieldset>
<fieldset>
<legend>다음 검색</legend>
<!-- https://search.daum.net/search
?
w=tot
&
DA=YZR
&
t__nil_searchbox=btn
&
sug=
&
sugo=
&
sq=
&
o=
&
q=icia -->
<form action="https://search.daum.net/search">
<input type="text" name="q"/>
<input type="submit" value="검색"/>
</form>
</fieldset>
</body>
실행결과
선택자
선택자(Selector)
스타일(css)을 적욜할 대상(태그, 클래스 , ...)
1) 전체 선택자(Universal Selector)
- 모든 요소 선택
2) 태그 선택자(Type Selector)
- 태그 이름 요소 선택
3) 클래스 선택자(Class Selector)
- 클래스 속성값이 일치하는 요소 선택
4) 아이디 선택자(Id Selector)
- 아이디 속성값이 일치하는 요소 선택
- html 문서 내에서 동일한 id는 사용 불가
- class 선택자보다 강력
5) 일치 선택자(Basic Combinatior)
- 특정 태그의 class 혹은 id를 선택할 때 사용
6) 자식 선택자(Child Combinator)
- 선택자의 자식 요소
source code 및 실행결과
/* selector.css */
* {
color : red;
}
li {
color : green;
}
.oran {
color : orange;
}
#hpink {
color : hotpink;
}
li.oran {
color : orange;
}
ul > * {
background-color : aquamarine;
}
.oran + li{
color : red;
}
#hpink + li {
color:cornflowerblue;
}
'Spring-Java > Front-End' 카테고리의 다른 글
| Day41_자바스크립트, 자료형, 변수와 함수(addEventListener, jQuery) (1) | 2023.10.21 |
|---|---|
| Day40_상속, 넘침 (0) | 2023.10.16 |
| Day37_여백(margin/padding) 속성, 테이블 태그 (0) | 2023.10.12 |
| Day34_img/audio/video 태그, list 태그 (2) | 2023.10.10 |
| Day33_인라인/블럭 요소, 태그 종류 (3) | 2023.10.04 |