form
: 사용자로부터 특정한 정보나 데이터를 받고자 할 때 사용(이때 사용자는 client
, 데이터를 받는 쪽은 server
를 뜻함. 결론적으로 서버에게 데이터를 전송하기 위해 사용)
사용자들에게 단순히 정보를 제공하는 이전 태그와들과는 다른 목적을 갖고 있음
action = "주소"
: API 주소, 즉 해당 form를 처리할 서버 쪽 친구에게 접근이 가능한 url
method = ""
: 데이터를 전송하는 방식에 따라 GET
방식, POST
방식로 나뉜다.
method = "GET"
: url에 사용자 정보가 담겨서 전송, 전송할 수 있는 정보의 길이가 제한됨, 퍼머링크로 사용됨(퍼머링크: 정보를 식별하는 고유의 식별자, 고유의 주소 체계를 뜻함).
method = "POST"
: url 상에 전달한 사용자 정보가 표시되지 않음, 전송할 수 있는 데이터 길이 제한X, 퍼머링크로 사용될 수 없음.
GET
, POST
는 (서버 쪽이 관련되어 있기 때문에 GET | POST
차이에 대해서 다시 언급하도록 하겠다.)
<form action = "" method = "">홍길동</form>
<input>
: 사용자가 특정 정보를 전달하기 위해 입력하는 태그
type
별로 다양한 정보를 전송할 수 있음(text
,email
,password
,number
,file
등등..)
required
: 텍스트 내용 입력이 필수일 때 사용하는 속성값
placeholder = "내용"
: 텍스트 입력 칸에 짧은 도움말을 부여하는 속성값
텍스트 제출 메일 제출 비밀번호 제출 숫자 제출 파일 제출<form action="#" method="POST"> <label for="first">텍스트</label> <input type="text" name="" id="first" required placeholder="입력하시오" /> <button type="submit">제출</button> </form> <form action="#" method="POST"> <label for="second">메일</label> <input type="email" name="" id="second" required placeholder="입력하시오" /> <button type="submit">제출</button> </form> <form action="#" method="POST"> <label for="third">비밀번호</label> <input type="password" name="" id="third" required placeholder="입력하시오" /> <button type="submit">제출</button> </form> <form action="#" method="POST"> <label for="fourth">숫자</label> <input type="number" name="" id="fourth" required placeholder="입력하시오" /> <button type="submit">제출</button> </form> <form action="#" method="POST"> <label for="fifth">파일</label> <input type="file" name="" id="fifth" required placeholder="입력하시오" /> <button type="submit">제출</button> </form>
<label>
: 원하는 <input>
값에 이름을 붙일 때 사용
for
속성값을 <input>
태그의 id
속성값과 동일하게 기입
<label for="one">텍스트</label> <input type="text" name="" id="one">
텍스트 <- 클릭시 input창으로 포커싱
<input type = "radio">
: 라디오 버튼
다중 선택이 가능하나 동일한 name
값을 부여할 시, 한 가지만 선택 가능, 즉 연관있는 항목들끼리 묶음
다중선택: 구독 미구독 제출 단일선택: 구독 미구독 제출<form action="" method="POST"> <label for="subscripted">구독</label> <input type="radio" name="" id="subscripted" /> <label for="unsubscripted">미구독</label> <input type="radio" name="" id="unsubscripted" /> <button type="submit">제출</button> </form> <form action="" method="POST"> <label for="subscripted">구독</label> <input type="radio" name="subscription" id="subscripted" /> <label for="unsubscripted">미구독</label> <input type="radio" name="subscription" id="unsubscripted" /> <button type="submit">제출</button> </form>
<input type = "check">
: 체크박스
name = ""
: 체크박스 끼리 관련있음을 알리기 위해 사용하는 속성값
value = ""
: 선택한 체크박스가 무엇인지 서버에게 알려주는 속성값
checked
: 체크박스가 미리 선택되게 하는 속성값
HTML CSS 제출<form action="#" method="post"> <label for="HTML">HTML</label> <input type="checkbox" name="skills" id="HTML" value="HTML" /> <label for="CSS">CSS</label> <input type="checkbox" name="skills" id="CSS" value="CSS" /> <button type="submit">제출</button> </form>
<select>
: pull down
메뉴를 생성
<option>
: pull down
리스트 항목 생성
name = ""
: <option>
태그들의 그룹화를 위해 필수로 지정하는 속성값
value = ""
: 리스트 항목간 구별하기 위해 사용하는 속성값
multiple
: 다중 선택이 가능하게 하는 속성값(선택 후 드래그)
단일 선택: 사이즈 S M L XL 제출 다중 선택: 사이즈 S M L XL 제출<form action="#" method="post"> <label for="clothes">사이즈</label> <select name="size" id="clothes"> <option value="small">S</option> <option value="medium">M</option> <option value="large">L</option> <option value="xlarge">XL</option> </select> <button type="submit">제출</button> </form> <form action="#" method="post"> <label for="clothes">사이즈</label> <select name="size" id="clothes" multiple> <option value="small">S</option> <option value="medium">M</option> <option value="large">L</option> <option value="xlarge">XL</option> </select> <button type="submit">제출</button> </form>
<textarea>
: 여러줄에 걸친 정보를 입력할 때 사용하는 태그
cols
: 열
rows
: 행
텍스트영역 제출<form action="#" method="post"> <label for="area">텍스트영역</label> <textarea name="" id="area" cols="30" rows="5" placeholder="입력하세요"></textarea> <button type="submit">제출</button> </form>
<button>
: 버튼 생성 태그
type = "button"
: 아무 기능 없는 버튼
type = "submit"
: <form>
태그에 담긴 내용을 전달하고자 할 때 사용
type = "reset"
: 입력값을 초기화하는 속성값
텍스트입력 그냥 버튼 제출 리셋<form action="#" method="post"> <label for="텍스트">텍스트입력</label> <input type="text" id="텍스트" /> <button type="button">그냥 버튼</button> <button type="submit">제출</button> <button type="reset">리셋</button> </form>
다음에는 semantic web, semantic markup에 대해서 알아보자!