230316 스물 한 번째 수업_HTML
<form></form>aaaction 속성blankcheckbox 타입fieldset 태그get방식hidden 태그hrefinput typelegend 태그method 속성post방식radioselect와 option 태그submittarget 속성textarea 태그value날짜와 시간 태그스핀 박스하이퍼링크
0
국비 수업
목록 보기
21/72
*자동완성 벗어날 때 ctrl + spacebar 하면 선택됨
하이퍼링크:
하이퍼링크 기능은 웹 문서의 가장 핵심
클릭을 통해 연결된 웹으로 이동하여 사용을 편리하게 함
텍스트를 클릭하여 링크로 이동하는 방법,
이미지를 클릭하여 링크로 이동하는 방법,
현재 페이지 내에서 링크로 이동하는 방법
a태그는 href 태그가 반드시 쌍으로 같이 써줘야 됨
화면에는 링크표시 문구만 보여짐
img에서 src를 꼭 써줘야 이미지가 보여지는 것처럼 a에서는 href를 꼭 써줘야함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>하이퍼링크 관련 태그</title>
</head>
<body>
<h1>하이퍼링크 관련 태그</h1>
<!--a 태그의 href속성으로 링크를 만들 수 있음-->
<ul>
<li><a href="02.글자관련태그.html">글자관련태그</a></li>
<li><a href="03.목록관련태그.html">목록관련태그</a></li>
<!--네트워크가 연결된 상황이라면 현재 서비스되고 있는 웹사이트도 가능-->
<li><a href="https://www.naver.com/">네이버</a></li>
</ul>
<h3>* target 속성: 연결된 페이지를 어느 탭에서 열건지 지정(_self(기본값), _blank(새탭))</h3>
<a href="https://www.google.com" target="_self">구글 사이트</a> <!--_self 기본값이라 안 써줘도 적용-->
<a href="https://www.daum.net" target="_blank">다음 사이트</a>
<h3>* img 태그를 이용하여 링크 만들기</h3>
<a href="https://www.iei.or.kr/main/main.kh?null" target="_blank"><img src="resources/image/img5.jpg" width="300" height="150"></a>
<a href="http://www.w3schools.com" target="_blank"><img src="resources/image/img1.jpg" width="150" height="200"></a>
<h3 id="jump">* 한 페이지 내에서 점프하는 링크 만들기</h3>
<a href="#content3">본문내용 3으로 가기</a>  
<a href="#content4">본문내용 4로 가기</a>
<h4>본문 내용1</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, iusto adipisci pariatur ipsum animi ut, explicabo velit ea iste illo quisquam reiciendis dolore incidunt deserunt totam. Consequatur officiis unde aliquam!
Similique repellendus nam velit rem labore? Molestias quaerat voluptatum aspernatur in explicabo rerum deserunt perferendis soluta eaque accusamus ipsam et esse adipisci ipsa commodi repudiandae, laborum, voluptatibus eius dolore suscipit!
</p>
<h4>본문 내용2</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi cum sequi dicta cupiditate id quia fuga ullam perspiciatis neque. Cumque quaerat facilis similique exercitationem unde expedita inventore consectetur ullam doloribus?
Et fugit iste maxime, repellendus consequatur repudiandae amet reiciendis officia esse ea magni neque eaque. Facilis deleniti ratione aliquid, repellat incidunt, vel aspernatur sequi saepe accusantium odio quia maiores soluta!
</p>
<h4 id="content3">본문 내용3</h4>
<a href="#jump">위로 올라가기</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi cum sequi dicta cupiditate id quia fuga ullam perspiciatis neque. Cumque quaerat facilis similique exercitationem unde expedita inventore consectetur ullam doloribus?
Et fugit iste maxime, repellendus consequatur repudiandae amet reiciendis officia esse ea magni neque eaque. Facilis deleniti ratione aliquid, repellat incidunt, vel aspernatur sequi saepe accusantium odio quia maiores soluta!
</p>
<h4 id="content4">본문 내용4</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi cum sequi dicta cupiditate id quia fuga ullam perspiciatis neque. Cumque quaerat facilis similique exercitationem unde expedita inventore consectetur ullam doloribus?
Et fugit iste maxime, repellendus consequatur repudiandae amet reiciendis officia esse ea magni neque eaque. Facilis deleniti ratione aliquid, repellat incidunt, vel aspernatur sequi saepe accusantium odio quia maiores soluta!
</p>
<br><br>
<a href="#jump">위로 올라가기</a>
<br><br>
</body>
</html>폼(form) 태그:
서버로 전송하여 가령, 검색이나 아이디와 비밀번호가 같은지 확인하고 응답을 새 창으로 보내주는 것
서버로 보내는 방식
- input 속성 태그
기본값: text
<title>입력양식 및 폼 관련 태그</title>
</head>
<h1>입력양식 관련 태그</h1>
<h2>input 태그</h2>
<p>사용자로부터 값을 입력받을 수 있는 텍스트박스, 체크박스, 라디오 버튼 등을 만듦</p>
아이디: <input type="text"><br>
비밀번호: <input type="text"><br>
성별: <input type="radio">여   <input type="radio">남 <br>
<input type="submit" value="로그인">
<br>
<hr>
<h1>폼 관련 태그</h1>
<p>
form 태그내에 submit버튼 클릭시
해당 form안에 사용자가 입력한 값들을 서버로 전송하면서 요청하는 역할
<br><br>
form action="" method="" <br>
*action속성: 해당 form에 사용자가 입력한 값들을 전달하면서 요청할 서버의 경로를 제시
*method속성: 요청 전송 방식을 지정하는 속성(get(기본값)/post)<br>
> get방식: 요청시 사용자가 입력한 값들이 url에 노출되는 방식<br>
> post방식: 요청시 사용자가 입력한 값들이 url에 노출X 방식<br>
form내의 submit버튼 클릭시 action 지정한 서버로 사용자가 입력한 값들이 넘어가면서 요청됨
(사용자가 입력한 값들을 항상 key=value 쌍으로 전달)
</p>
<form action="serch.jsp" method="get">
검색어: <input type="text" name="keyword">
<input type="submit" value="검색">
</form>
<h3>fieldset: 그룹을 묶는 태그(기본적인 테두리 존재)</h3>
<h3>legend: 해당 그룹에 제목을 붙이는 태그</h3>
<form action="test.jsp"></form>
<fieldset>
<legend>제목1</legend>
입력1: <input type="text" name="text1"><br>
입력2: <input type="text" name="text2">
</fieldset>
<fieldset>
<legend>제목2</legend>
입력3: <input type="text" name="text3"><br>
입력4: <input type="text" name="text4">
</fieldset> <br>
<input type="submit">
<hr>
<h2>text와 관려된 input태그의 타입</h2>
<form action="test.jsp" method="get">
<h3>type="text" 기본값으로 안 넣어도 적용</h3>
<p>
-한줄짜리 텍스트를 입력할 수 있는 텍스트 박스(기본값)
</p>
아이디: <input name="userID" placeholder="아이디를 입력하세요" required><br>
<!-- email: <input placeholder="exam@naver.com"><br>
주민번호: <input placeholder="900101-1234567" maxlength="14">
-->
<h3>type="password"</h3>
<p>-비밀번호를 입력할 수 있는 텍스트 박스</p>
비밀번호: <input type="password" name="uerPW" placeholder="영문,숫자,특수문자만 가능" maxlength="16" required>
<!--required는 반드시 값을 넣어야 넘어갈 수 있는 기능-->
<br>
<input type="submit" value="로그인">
<h3>type="serch|url|email|phone"</h3>
<p>-보기엔 일반 텍스트 박스와 유사하지만 각각의 정보에 맞게 세분화된 기능 제공</p>
검색: <input type="search" name="keyword">
<br>
홈페이지: <input type="url" name="homepage">
<br>
이메일: <input type="email" name="email">
<br>
전화번호: <input type="tel" name="tel">
<br>
<input type="submit">
</form>
<h2>textarea 태그</h2>
<p>-텍스트 상자로 여러줄 입력할 수 있음</p>
<form action="test.do">
<fieldset>
<legend>글작성</legend>
제목: <input name="title" size="30"><br>
내용: <textarea name="content" placeholder="내용입력" cols="35" rows="10"></textarea>
</fieldset>
<br>
<input type="submit" value="작성완료">
</form>
<hr>
<h2>숫자와 관련된 input 태그의 타입</h2>
<p>
-숫자값만 작성 가능한 텍스트 박스<br>
-스핀 박스(위/아래 버튼표시)가 표시됨
</p>
수량: <input type="number" name="amount" min="0" max="20" step="5" value="0">
<br>
<h3>type="range"</h3>
<p>
-슬라이드 바를 통해 숫자 지정 가능
</p>
점수: <input type="range" name="score" min="0" max="100" step="10" value="0">
<br>
<input type="submit">
</form>
<h2>날씨 및 시간과 관련된 타입</h2>
<form action="test.do">
<h3>type="date|month|week|datetime-local"</h3>
date: <input type="date" name="dateIn"><br>
<!--연도, 월, 일 입력을 받는 텍스트 박스-->
month: <input type="month" name="monthIn"><br>
<!--연도, 월까지만 입력받는 텍스트 박스-->
week: <input type="week" name="weekIn"><br>
<!--해당 년도에 몇번째 주인지 입력받는 텍스트 박스-->
time: <input type="time" name="timeIn"><br>
<!--오전|오후 시 분 텍스트 박스-->
datetime-local: <input type="datetime-local" name="dtIn"><br>
<!--연 월 일 오전|오후 시 분 -->
<input type="submit" value="서버로 전송">
<input type="reset"> <!--폼 안의 모든 정보 초기화-->
</form>
<hr>
<h2>라디오버튼과 체크박스 관련 input태그의 타입</h2>
<form action="test.do">
<h3>라디오 버튼(type="radio")</h3>
<p>
-여러개의 값들 중 오직 한 개만 선택할 때
-서버로 value값이 전송됨
</p>
성별: <input type="radio" name="gender" value="x" id="gx">
<label for="gx">선택안함</label>  
<!--label은 글자를 선택해도 라디오가 선택됨-->
<input type="radio" name="gender" value="M" id="gm">
<label for="gm">남</label>  
<input type="radio" name="gender" value="F" id="gf">
<label for="gf">여</label>
<!--서버엔 value의 값이 넘어가게 됨-->
<br>
고향: <input type="radio" name="country" value="서울">서울  
<input type="radio" name="country" value="경기">경기  
<input type="radio" name="country" value="기타">그 외  
<br>
<input type="submit">   <input type="reset">
</form>
<hr>
<form action="test.do">
<h3>체크박스 (type="checkbox")</h3>
<p>
-제시한 여러개의 값들 중 다중 선택할 때
-서버로 value값이 전송됨
</p>
취미: <input type="checkbox" id="book" value="독서" name="hobby">
<label for="book">독서</label> 
<input type="checkbox" id="exercise" value="운동" name="hobby">
<label for="exercise">운동</label> 
<input type="checkbox" id="movie" value="영화감상" name="hobby">
<label for="movie">영화감상</label> 
<br>
<input type="submit"> 
<input type="reset">
</form>
<h2>추가적인 input태그의 타입</h2>
<form action="test.do">
<h3>type="color"</h3>
<p>-색상을 선택할 수 있는 input 타입</p>
색상 선택: <input type="color" name="color">
<br>
<h3>type="file"</h3>
<p>-첨부하고자 하는 파일을 선택하는 input타입</p>
첨부 파일: <input type="file" name="uploadFile">
<br>
<h3>type="hidden"</h3>
<p>-사용자에게 보이지 않고 값을 서버로 전송할 때</p>
<!--쇼핑몰에서 2페이지로 넘어갈 때 검색한 상품의 리스트를 유지하여 보여주는 것-->
<input type="hidden" name="pageNum" value="3">
<br>
<h3>type="submit|reset|button"</h3>
<!--button은 보통 자바스크립트에서 활성화 시킴-->
<input type="submit"> <!--이 버튼이 들어있는 form의 모든 값을 서버로 전송-->
<input type="reset"> <!--이 버튼이 들어있는 form의 모든 값을 초기화-->
<input type="button" value="일반 버튼">
<br>
<h3>button[type="submit(기본값)|reset|button"]</h3>
<button type="submit">제출 버튼</button>
<button type="reset">초기화 버튼</button>
<button type="button">일반 버튼</button>
<!--근데 보통 input을 많이 쓰긴 함-->
</form>
<hr>
<h2>select태그와 option태그</h2>
<p>
-사용자에게 직접 키보드로 입력받는 것이 아니라 내가 제시한 목록 중에서 선택
-제출시 현재 선택된 option값이 넘어감
</p>
<form action="test.do">
국적: <select name="national">
<option value="kr">한국</option>
<option value="us">미국</option>
<option value="eu">영국</option>
<option value="tai">태국</option>
<option value="etc" selected>기타</option>
</select>
<br>
<h3>html5에서 새로 추가된 기능 datalist</h3>
<p>
-내가 제시한 목록 중에서 선택 가능하고 목록에 없다면 직접 입력 가능
</p>
제일 가고 싶은 여행지:
<input type="text" name="tour" list="tourlist">
<datalist id="tourlist">
<option value="kr">한국</option>
<option value="us">미국</option>
<option value="eu">영국</option>
<option value="tai">태국</option>
</datalist>
<br>
<input type="submit">
</form>
</body>
</html>action 속성:
해당 form에 사용자가 입력한 값들을 전달하면서 요청할 서버의 경로를 제시
검색 창의 url 구성
name 쓰면 저렇게 key + value 값 쌍으로 서버에 넘어가게 됨
이렇게 url에서 확인할 수 있음
- 많이 사용하는 input태그의 type
게시판 만들 때 내용 박스 많이 사용함
둘 다 많이 사용함
type="hidden"
히든으로 숨겨서 사용자에겐 안 보여주지만 서버엔 넘기는 방식
내 인생을 망치러 온 나의 구원, 개발