link는 페이지를 열었을때 페이지 이름 옆에 나타나는 아이콘을 의미한다.
아래의 예를 들면 <link rel="icon" href = "btn.png">와 같이 사용한다.
input은 type으로 종류를 정하고
value로 내용, 기본값을 설정하고
name을 지정할 수 있다.
input은 기능을 가진 버튼을 만들 수 있기 때문에 제일 중요한 부분이다.
type은
button, submit, password, checkbox, radio, hidden, file, select, email, number, range, color, date, month, datetime-local, image
time, url, week, reset
다양하지만 전부 외울 필요는 없고 필요할 때 찾다보면 익숙해진다.
그 외에
fieldset 블록은 하나의 틀, 프레임을 만든다.(아래 실행 화면 참조.)
<html>
<head>
<meta charset="UTF-8">
<title>Input</title>
<link rel="icon" href = "btn.png">
</head>
<body>
<input type="button" value="click"/>
<!--button : 이벤트를 실행하는 트리거 역할-->
<input type="submit" value="전송"/>
<!--어떤 값을 제출하는 역할, 서버에 제출-->
<!--자주 쓰임, 중요!-->
<fieldset>
<legend>text & password</legend>
ID : <input type="text" name = "UserID" value=""placeholder = "아이디를 입력 해주세요."/>
<br/>
PW : <input type="password"name = "UserPW" value="">
</fieldset>
<!--text : 텍스트 박스-->
<!--password : 암호 박스-->
<!--value속성은 기본값을 말함, 처음에 담겨있을 값-->
<!--placeholder 속성은 커서를 안올리면 보이지만 올리면 사라지는 글-->
<fieldset>
<legend>checkbox & radio</legend>
<input type="checkbox" name="hobby" value="영화"/> 영화
<input type="checkbox" name="reading" value="독서"/> 독서
<input type="checkbox" name="game" value="게임"/> 게임
<br/>
<!--name이 꼭 일치해야 그룹으로 묶여 하나만 선택된다.-->
<input type="radio" name="gender" value="male"/> 남자
<input type="radio" name="gender" value="female"/> 여자
<br/>
<input type="radio" name="number" value="1"/> 1
<input type="radio" name="number" value="2"/> 2
<input type="radio" name="number" value="3"/> 3
<input type="radio" name="number" value="4"/> 4
</fieldset>
<fieldset>
<legend>text & hidden</legend>
<input type="text" name="userName" value="홍길동" readonly>
<!--readonly는 읽기전용, 수정 불가하게 바꿈-->
<input type="hidden" name="userName" value="홍길동">
</fieldset>
<fieldset>
<legend>File</legend>
<form>
<input type="file" name="img"/>
<input type="submit" value="전송"/>
<!--submit은 value를 빈칸으로 하면 브라우져에 따라 기본값이 다르다.-->
</form>
<!--form은 나중에 따로 설명한다.-->
</fieldset>
<fieldset>
<legend>select</legend>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<!--selected를 해놓으면 기본값으로 체크 되어 있음-->
<option value="audi">Audi</option>
</select>
</fieldset>
<!--자주 안쓰임, 유용하지만 HTML5만 지원함, 브라우져에 따라 작동 안됨-->
<fieldset>
<legend>e-mail</legend>
<form>
E-mail :
<input type="email" name="mail" required/>
<!--required라고 입력하면 정상 값을 입력하지 않으면 오류 풍선이 뜸-->
<input type="submit"/>
</form>
</fieldset>
<fieldset>
<legend>number & range</legend>
나이(1~200) :
<input type="number" name="age" min="1" max="200"/>
<!--숫자형이 아니고 문자형임-->
<!--min, max로 범위 설정 가능-->
<br/>
points(0~100)
<input type="range" name="point" min="0" max="100" value="50" step="20"/>
<!--스크롤을 만듦, step으로 한번 당길 때 움직이는 양을 설정할 수 있다.-->
</fieldset>
<!--대체품이 있음, bootstrap 등..-->
<fieldset>
<legend>color</legend>
좋아하는 색상 : <input type="color" name="color"/>
<!--색상 선택 기능-->
</fieldset>
<fieldset>
<legend>date & month</legend>
날짜:<input type="date" name="day"/>
<br/>
월:<input type="month" name="month">
<br/>
날짜+시간:<input type="datetime-local"name="time"/>
</fieldset>
<input type="image"src="btn.png" alt="버튼 아이콘" width="100"height="100"/>
<fieldset>
<legend>time & url & week & reset</legend>
<form>
ID:<input type="text"><br/>
TIME:<input type="time"><br/>
URL:<input type="url"><br/>
WEEK:<input type="week"><br/>
<input type="reset" value="reset">
<input type="submit" value="로그인"/>
</form>
</fieldset>
</body>
</html>
아래는 실행화면
'HTML, CSS, JavaScript, jQuery > 02.HTML' 카테고리의 다른 글
| [HTML]02-09.form을 이용한 정보 전송, 전달 + 예제 (0) | 2018.10.16 |
|---|---|
| [HTML]02-08.Input(버튼, 텍스트박스 등 다양한 노드 생성) 예제 (0) | 2018.10.16 |
| [HTML]02-06.iframe, 다른 사이트 참조 + 예제 (0) | 2018.10.15 |
| [HTML]02-05.리스트, li, ul, ol, dl(dl, dt, dd) (0) | 2018.10.15 |
| [HTML]02-04.이미지, 하이퍼링크 태그(img, a) (0) | 2018.10.15 |