728x90
반응형
[ex01]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form</title>
</head> <!-- request 기본방식 get방식, head에는 메타데이터, body에는 업무내용 -->
<body> <!-- 입력화면을 만드려면 form이 무조건 있어야한다. -->
<form action="#" method="post"> <!--get- query string으로서 URL이 되고 URL은 request head에 저장이된다)-->
<ul> <!-- post- request body이 저장이 된다. -->
<li>이름: <input type="text" name="userName"/></li> <!-- userName: 변수 -->
<li><input type="submit" value="가입"/></li>
</ul>
</form>
</body>
</html>
[ex02]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fieldset</title>
</head>
<body>
<form action="#">
<fieldset>
<legend>로그인 정보</legend>
<ul>
<li>아이디:<input type="text" name="userId" /></li>
<li>암호:<input type="password" name="pw" /></li>
</ul>
</fieldset>
<fieldset>
<legend>회원 정보</legend>
<ul>
<li>이름:<input type="text" name="userName" /></li>
<li>메일:<input type="email" name="email" /></li>
</ul>
</fieldset>
<fieldset>
<input type="submit" value="가입하기" />
</fieldset>
</form>
</body>
</html>
<!-- <fieldset>데이터들의 저장소 집합 구역으로 나누어짐
<legend>fieldset의 제목을 쓸때 사용-->
[ex03]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 정보</title>
</head>
<body>
<form>
<fieldset>
<legend>로그인 정보</legend>
<ul>
<li><label>아이디<input type="text" id="id"></label></li>
<li><label>암호<input type="password" id="pw"></label></li>
</ul>
</fieldset>
<fieldset>
<legend>개인 정보</legend>
<ul>
<li><label for="name">이름</label><input type="text" id="name"></li>
<li><label for="email">이메일</label><input type="email" id="email"></li>
</ul>
</fieldset>
</form>
</body>
</html>
[ex04]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fieldset</title>
</head>
<body>
<form>
<fieldset id="영어">
<legend>
수강 과목을 선택하세요<small>(1과목 선택 가능)</small>
</legend>
<ul>
<li><input type="radio" name="spk" value="low" checked> 영어 회화(초급)</li><!-- 라디오박스의 파라미터는 String 값 한개. -->
<li><label><input type="radio" name="spk" value="middle"> 영어 회화(중급)</label></li><!--name: 그룹 -->
<li><!-- 좋은 코드 -->
<input type="radio" name="spk" value="high" id="engRadio">
<label for="engRadio">영어 회화(고급)</label>
</li>
</ul>
</fieldset>
<fieldset>
<legend>
관심분야는? <small>(다수 선택 가능)</small>
</legend>
<ul>
<li><input type="checkbox" name="pre" value="grammar" checked>문법</li> <!-- 체크박스의 파라미터는 배열(String 배열)로 값이 넘어간다.(여러가지를 선택할 수 있기때문에.)-->
<li><label><input type="checkbox" name="pre" value="voca">어휘</label></li> <!-- name: 데이터값 id: 객체 -->
<li>
<input type="checkbox" name="pre" value="speak" id="preCheck"><label for="preCheck">회화</label>
</li>
</ul>
</fieldset>
</form>
</body>
</html>
[ex05]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>input</title>
</head>
<body><!-- 테이블은 데이터를 출력하는 목적, 테이블을 디자인목적으로 X 데이터는 html, style은 css-->
<input type="hidden" name="h" value="1"/> <!--사용자에게 감추고싶을때//서버에는 값을 넘겨주는데 감춰져서 사용자 입력을 할수없기 떄문에 무조건 value값을 써야함 -->
<input type="text" name="t" value="1" size="10" maxlength="10"/><!-- size-텍스트크기, maxlength-글자제한, value-기본값 -->
<input type="password" placeholder="password"/><!-- placeholder-입력값을 알아보기 위한 속성-->
<input type="search" placeholder="search"/><!-- 스마트폰 돋보기로 검색가능. -->
<input type="url" placeholder="url"/><!-- 스마트폰에서 .com -->
<input type="email" placeholder="email"/><!-- 이메일 -->
<input type="tel" placeholder="tel"/> <br><!--전화번호 -->
<input type="number" min="1" max="5" value="1" step="2"/><!-- 기본값1, 2씩증가 최소값 1 최대값 5 음수값 가능, 숫자입력만 가능 -->
<input type="range" min="1" max="3" value="2"/><!-- 입력범위 -->
<input type="radio" />
<input type="checkbox"/>
<input type="color"/><br>
<input type="datetime-local"/>
<input type="date"/><input type="month"/><input type="week"/>
<input type="time" value="09:00"/><br>
<input type="file"/>
<input type="submit"/><!-- form 안에서 사용가능 -->
<input type="reset"/><!-- form 안에서 사용가능 -->
<input type="image" src="img/login.jpg"/>
<input type="button" value="버튼"/>
<textarea> </textarea>
</body>
</html>
[ex06]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>input attribute</title>
</head>
<body>
<form>
<input type="text" readonly /> <!-- 읽을수만 있게 value 속성이 있어야한다. 텍스트테두리는 css에서 없앨 수 있다.-->
<input type="text" autofocus /> <!-- 초기화면 깜빡깜빡하게 여러개가 사용될 경우 처음나온 autofocus에 적용된다.-->
<input type="text" placeholder="주소" /> <input type="text" autocomplete="off" /><!-- 자동완성기능 -->
<input type="text" required /> <!-- 필수입력란. -->
<input type="submit" />
</form>
</body>
</html>
[ex07]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dropdown</title>
<!-- select 속성 이용. -->
</head>
<body>
<form action="#">
<select name="num">
<option value="1">가</option>
<option value="2">나</option>
</select>
<select name="chr">
<option>가</option>
<option>나</option>
</select>
<input type="submit"/>
<select size="2">
<!-- 처음시작 select창이 2개를 보여준다. -->
<option value="1">가</option>
<option value="2">나</option>
</select>
<select multiple>
<!-- option을 여러가지 선택가능. String 배열값으로 넘어간다. -->
<option value="1">가</option>
<option value="2">나</option>
</select>
<select>
<option value="1">가</option>
<option value="2" selected>나</option>
<!-- 초기화면에 선택한 옵션이 우선 출력된다. -->
</select>
<select>
<optgroup label="공대">
<option value="건축">건축학과</option>
<option value="기계">기계학과</option>
</optgroup>
<optgroup label="인문대">
<option value="역사">사학과</option>
<option value="국문">국문학과</option>
</optgroup>
</select>
<input type="text" list="mobile05">
<datalist id="mobile05">
<option value="ios"></option>
<option value="android"></option>
<option value="windows"></option>
</datalist>
<input type="text" list="mobile">
<datalist id="mobile">
<option value="ios" label="애플"></option>
<option value="android" label="구글"></option>
<option value="windows" label="MS"></option>
</datalist>
<textarea name="intro" cols="60" rows="5"></textarea>
</form>
</body>
</html>
[ex08]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>etc</title><!-- 쇼핑몰 관리자만들기 -->
</head><!-- java에서는 자바 컴파일러(compiler)가 에러를 잡아주지만 html, javascript 에서는 브라우저에서 interpreter(interpreting) console(F12)창으로 오류를 확인할 수 있다. -->
<body>
<button type="submit">전송</button><!-- = -->
<input type="submit" value="전송"/>
<button type="reset">초기화</button><!-- = -->
<input type="reset" value="초기화"/>
<button type="button">버튼</button>
<button type="submit"><img src="img/tick.png"/></button>
<input type="image" src="img/tick.png"/><br><br>
<form oninput="result.value=parseInt(num1.value)+parseInt(num2.value)">
<input type="number" id="num1"/> +
<input type="number" id="num2"/> =
<output id="result"></output><!-- NaN(Non a Number): 숫자가 아니다 -->
</form>
<progress value="30" max="100"></progress>
<progress value="0.3"></progress>
<meter value="10" max="100"></meter>
<meter value="0.1"></meter>
<meter value="11" min="2" max="20" low="8" high="16" optimum="10"></meter><!-- optimum 적정값. -->
</body>
</html>
728x90
반응형
'WEB > HTML' 카테고리의 다른 글
| HTML 태그 먹히지 않게 하기. (0) | 2018.05.04 |
|---|---|
| [HTML] SVG를 이용하여 색깔 그라데이션 넣기. (0) | 2017.08.28 |
| [HTML] HTML강의 - ch04 (0) | 2017.08.22 |
| [HTML] HTML강의 - ch02 (0) | 2017.08.22 |
| [HTML] HTML강의 - ch01 (0) | 2017.08.22 |