1. Input TAG
input 태그는 서버로 보낼 내용을 입력 받을 때 사용 한다.
input 사용시는 대부분 아래와 같은 방식으로 작성 된다.
< input type = 'checkbox' name = 'vehicle3' value = 'Boat' (추가 속성) >
input 에 있어서 가장 필수 적인 속성은 name 과 value 이다.
name 은 보낼 값(value)에 대한 항목 이다.
value 는 보내는 항목(name)에 대한 값 이다.
<html>
<head>
<meta charset="UTF-8">
<title>입력 형식</title>
</head>
<body>
<!--
버튼은 값을 서버로 전송하지 않기 때문에 표현하는 value 만 사용
-->
<input type="button" value="click me"/>
<button>click me</button>
<!--특정 영역을 테두리로 감싸준다.-->
<fieldset>
<legend>submit 사용법</legend>
<form> <!--form 태그로 감싸져야 한다.-->
<!--서버로 보낼 값이 있어야 한다.-->
ID : <input type="text" name="id" value="" placeholder="ID 입력해"/><br/>
PW : <input type="password" name="pw" value="" placeholder="비번 입력해"/>
<!--서브밋 버튼이 있어야 한다.-->
<input type="submit" value="전송"/>
</form>
</fieldset>
<fieldset>
<legend>radio & check box</legend>
<!--체크 박스는 복수선택이 가능하다.-->
<input type="checkbox" name="vehicle" value="Bike"/> Bike
<input type="checkbox" name="vehicle" value="Car"/> Car
<input type="checkbox" name="vehicle" value="Boat"/> Boat
<input type="checkbox" name="vehicle" value="Cycle"/> Cycle
<br/><br/>
<!--라디오 버튼은 단일 선택만 가능하다.-->
<input type="radio" name="gender" value="남"/> 남자
<input type="radio" name="gender" value="여"/> 여자
</fieldset>
<fieldset>
<legend>file</legend>
<form>
select a file : <input type="file" name="img" value="" multiple/>
<input type="submit" value="업로드"/>
</form>
</fieldset>
<fieldset>
<legend>text & hidden</legend>
First name : <input type="text" name="name" value="" placeholder="First name"/>
<br/>
Last name : <input type="hidden" name="name" value="" placeholder="Last name"/>
</fieldset>
<fieldset>
<legend>select & data list</legend>
자동차 선택 :
<!--가장 위에 있는 것이 기본 선택된다.-->
<select name="cars">
<option value="Volvo">볼보</option>
<option value="Benz">벤츠</option>
<option value="Audi" selected>아우디</option>
<option value="BMW">BMW</option>
</select>
<!--datalist 는 검색이 되는 select 이다.-->
브라우저 선택 :
<!--list 와 id 의 이름이 동일해야 한다.-->
<input list="browsers" name="browsers"/>
<datalist id="browsers">
<!--option 테크에 값을 넣지 않으면 자동으로 value 의 값이 적용됨-->
<option value="Edge"></option>
<option value="Firefox">Firefox</option>
<option value="Chrome"></option>
<option value="Opera">오페라</option>
<option value="Safari">사파리</option>
</datalist>
</fieldset>
<fieldset>
<legend>E-mail</legend>
<!--email 은 form 이 있어야만 동작한다.-->
<form>
ID : <input type="text" name="id" value="" required/>
이메일 : <input type="email" name="email" value=""/>
<input type="submit" value="전송">
</form>
</fieldset>
<!--정말 안쓰는 것들...끝-->
<fieldset>
<legend>color</legend>
좋아하는 색상을 선택하세요 :
<input type="color" name="favorcolor"/>
<br/>
date : <input type="date" name="day"/><br/>
month : <input type="month" name="dmonth"/><br/>
</fieldset>
<!--이미지 그래픽 적인 것들-->
<fieldset>
<legend>image</legend>
<img src="../img/chrome.png" width="50px" height="50px" alt="크롬아이콘"/>
<input type="image" src="../img/img01.jpg" width="50px" height="50px" alt="버섯 이미지"/>
</fieldset>
<fieldset>
<legend>게이지</legend>
RANGE(0~100) :
<input type="range" name="point" value="50" min="0" max="100" step="10"/>
<br/>
Disk Useage C : <meter min="0" max="100" value="20"></meter>
<br/>
Download 진행률 :
<progress min="0" max="100" value="35"></progress>
</fieldset>
</body>
</html>
2. Form TAG
<html>
<head>
<meta charset="UTF-8">
<title>form 태그</title>
</head>
<body>
<!--action : 데이터를 보낼 서버 주소-->
<!--
method : 보내는 방식
GET - 보내는 데이터가 url 에 노출 / 보안성 낮음 / 속도 빠름 / 데이터 제한 있음
POST - 보내는 데이터 안 보여줌 / 보안성 높음 / 속도 낮음 / 데이터 거의 무제한
-->
<form action="" method="post">
<!--input 이 이 안에 들어가야 서버로 전송이 된다.-->
ID : <input type="text" name="id" value=""/>
<br/><br/>
PW : <input type="password" name="pw" value=""/>
<br/><br/>
<input type="submit" value="로그인"/>
</form>
</body>
</html>
3. Link
<html>
<head>
<meta charset="UTF-8">
<title>링크 옵션</title>
</head>
<body>
<!--_parent : 부모의 창에 뜬다.-->
<a href="http://www.google.com" target="_parent">링크 1</a>
<!--_blank : 새 탭에 뜬다.-->
<a href="http://www.naver.com" target="_blank">링크 2</a>
<!--_self : 일반적으로 생략, 현재 창에 뜬다.-->
<a href="http://www.daum.net">링크 3</a>
</body>
</html>
'HTML' 카테고리의 다른 글
| 03. List, Table, Span (0) | 2024.02.27 |
|---|---|
| 01. HTML 의 기본 (1) | 2024.02.27 |
