<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../Free_Offerd_CSS/necolas.css">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--form 태그는 사용자가 입력한 데이터를 수집하기 위해 사용. 여러가지의 입력 양식 태그들을 포함 가능.-->
<!--get 방식은 전송 URL 에 입력 데이터를 쿼리 스트링으로 보내는 방식.-->
<!--ex) http://jsonplaceholder.typicode.com/posts?userId=1&id=1-->
<!--전송 URL 바로 뒤에 ‘?’를 통해 데이터의 시작을 알려주고, key-value 형태의 데이터를 추가한다.-->
<!--1개 이상의 전송 데이터는 ‘&’로 구분한다.-->
<!--URL 에 전송 데이터가 모두 노출되기 때문에 보안에 문제가 있으며 전송할 수 있는 데이터의 한계가 있다.-->
<!--(최대 255자).-->
<!--REST API 에서 GET 메소드는 모든 또는 특정 리소스의 조회를 요청한다.-->
<!--POST 방식은 Request Body 에 담아 보내는 방식이다.-->
<!--ex) http://jsonplaceholder.typicode.com/posts-->
<!--URL 에 전송 데이터가 모두 노출되지 않지만 GET 에 비해 속도가 느리다.-->
<!--REST API 에서 POST 메소드는 특정 리소스의 생성을 요청한다.-->
<form action="http://jsonplaceholder.typicode.com/users" method="get">
<!--텍스트 타입으로 입력받고 이름은 id 이며 기본으로 적혀진 내용은 1-->
ID: <input type="text" name="id" value="1"><br>
<!--텍스트 타입으로 입력받고 기본으로 적혀진 내용은 Bret-->
username: <input type="text" name="username" value="Bret"><br>
<!--버튼을 누르게 되면 form 태그의 method 어트리뷰트에 지정된 방식으로 action 어트리뷰트에 지정된-->
<!--서버측의 처리 로직에 전달함.-->
<input type="submit" value="Submit">
</form>
<!--input 태그는 form 태그 중에서 가장 중요한 태그로 사용자로부터 데이터를 입력받기 위해 사용된다.-->
<!--input 태그는 다양한 종류가 있는데 type 어트리뷰트에 의해 구분된다. form 태그 내에 존재하여야 -->
<!--입력 데이터를 전송할 수 있으나 ajax 를 사용할 시에는 form 태그 내에 존재하지 않아도 된다.-->
<!--서버에 전송되는 데이터는 name 어트리뷰트를 키로, value 어트리뷰트를 값으로하여 -->
<!--key=value 의 형태로 전송된다.-->
<h3>button</h3>
<input type="button" value="Click me" onclick="alert('Hello world!')">
<hr>
<h3>checkbox</h3>
<input type="checkbox" name="fruit1" value="apple" checked> 사과<br>
<input type="checkbox" name="fruit2" value="grape"> 포도<br>
<input type="checkbox" name="fruit3" value="peach"> 복숭아<br>
<hr>
<h3>color</h3>
<input type="color" name="mycolor">
<hr>
<h3>date</h3>
<input type="date" name="birthday">
<hr>
<!--date & time control (년월일시분초) 생성. HTML spec 에서 drop 되었다.-->
<h3>datetime</h3>
<input type="datetime" name="birthdaytime">
<hr>
<!--지역 date & time control (년월일시분초) 생성-->
<h3>datetime-local</h3>
<input type="datetime-local" name="birthdaytime">
<hr>
<!--이메일 입력 form 생성. submit 시 자동 검증한다.-->
<h3>email</h3>
<input type="email" name="useremail">
<hr>
<h3>file</h3>
<input type="file" name="myfile">
<hr>
<h3>hidden</h3>
<input type="hidden" name="country" value="Norway">
hidden filed 는 사용자에게 표시 되지 않는다.
<hr>
<!--이미지로 된 submit button 생성-->
<h3>image</h3>
<input type="image" src="../Items/auto(1).jpg" alt="Submit" width="48" height="48">
<hr>
<h3>month</h3>
<input type="month" name="birthday month">
<hr>
<h3>number</h3>
<input type="number" name="quantity" min="2" max="10" step="2" value="2">
<hr>
<h3>password</h3>
<input type="password" name="pwd">
<hr>
<!--양자택일 선택 생성-->
<h3>radio</h3>
<input type="radio" name="gender" value="male" checked> 남자<br>
<input type="radio" name="gender" value="female"> 여자<br>
<hr>
<!--범위 지정 (ex) 이어폰 좌우 밸런스 조정)-->
<h3>range</h3>
<input type="range" name="points" min="0" max="10" step="1" value="5">
<hr>
<h3>reset</h3>
<input type="reset">
<hr>
<h3>search</h3>
<input type="search" name="googlesearch">
<hr>
<h3>submit</h3>
<input type="submit" value="Submit">
<hr>
<h3>tel</h3>
<input type="tel" name="mytel">
<hr>
<h3>text</h3>
<input type="text" name="myname">
<hr>
<h3>time</h3>
<input type="time" name="mytime">
<hr>
<h3>url</h3>
<input type="url" name="myurl">
<hr>
<h3>week</h3>
<input type="week" name="week_year">
<hr>
<!--select : 복수 개의 리스트에서 복수 개의 아이템을 선택할 때 사용.-->
<!--select : select form 생성-->
<select name="cars1">
<!--option : option 생성-->
<!--selected : 처음부터 선택되어 있음.-->
<option value="volvo" selected>Volvo</option>
<!--disabled : 선택 하지 못하게 함.-->
<option value="saab" disabled>Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<!--size="4" : 옵션 값들을 몇개나 보여줄지 설정-->
<!--multiple : 어트리뷰트가 있을 경우 컨트롤이나 쉬프트를 통한 다중선택이 가능해짐.-->
<select name="cars2" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi" selected>Audi</option>
</select>
<select name="cars3">
<!--optgroup : option 을 그룹화-->
<!--Swedish Cars-->
<!--Volvo-->
<!--Saab-->
<!--상기 방식처럼 선택할 수 있게 되어있음.-->
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<!--그룹화를 하였기 때문에 "german cars"가 disabled 이면 하위 항목들도 선택하지 못함.-->
<optgroup label="German Cars" disabled>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select><br>
<!--textarea : 여러 줄의 글자를 입력할 때 사용되는 박스.-->
<!--행의 길이는 10, 열의 길이는 30, 기본적으로 "Write something here"가 써있는 텍스트 박스.-->
<textarea name="message" rows="10" cols="30">Write something here</textarea><br>
<!--button : 클릭할 수 있는 버튼 생성. input 의 button 과 유사하지만 input 태그는 빈태그인데-->
<!--button 태그는 그렇지 않아서 button 요소에 텍스트나 이밎 같은 콘텐츠를 사용할 수 있다.-->
<!--type 어트리뷰트는 반드시 지정하여야 바람직하며 button, reset, submit 을 지정할 수 있다.-->
<button type="button" onclick="alert('Hello guys!')">Click!</button>
<input type="button" value="Click!" onclick="alert('Hello guys!')">
<!--filedset : 관련된 입력 양식들을 그룹화-->
<!--legend : filedset 태그 내에서 사용되며 그룹화된 filedset의 제목을 정의한다.-->
<fieldset>
<legend>Login</legend>
Username <input type="text" name="username">
Password <input type="text" name="password">
Login <button type="button" onclick="alert('On login!')">Login</button>
<!--이렇게 form 을 legend 안에 넣어서 사용할 수도 있다.-->
<form action="http://jsonplaceholder.typicode.com/users" method="get">
<!--텍스트 타입으로 입력받고 이름은 id 이며 기본으로 적혀진 내용은 1-->
ID: <input type="text" name="id" value="1">
<!--텍스트 타입으로 입력받고 기본으로 적혀진 내용은 Bret-->
username: <input type="text" name="username" value="Bret">
<!--버튼을 누르게되면 form 태그의 method 어트리뷰트에 지정된 방식으로 action 어트리뷰트에 지정된-->
<!--서버측의 처리 로직에 전달함.-->
<input type="submit" value="Submit">
</form>
</fieldset>
</body>
</html>