#HTML 태그 <form>, <input> 사용법
<form>~</form> 태그
: 폼 태그는 클라이언트 측에서 서버로 값을 전송할 때 사용하는 태그이다.
안에 여러 가지 값을 담을 수 있는 입력 양식을 만드는 태그를 포함할 수 있다.
<form action="URL" method="get이나post"></form>
중요 속성
-name : form의 식별자
-method : 데이터를 전송하는 방식(get, post 등등의 방식)
-action : 전송된 데이터를 받는 곳(form에 입력한 값을 서버의 어디로 전달할 것인지 결정)
<input> 태그
<input 속의 name="userName" value="홍길동">
name = "값의 식별자"
value = "입력한 값"
readonly = 텍스트 필드를 읽기전용으로 설정한다.
disabled = 텍스트 필드를 비활성화 상태로 설정한다.
maxlength = 텍스트 필드에 입력할 수 있는 문자의 최대 길이(length)를 설정한다.
size= 텍스트 필드에서 한 번에 보여줄 수 있는 문자의 최대 개수만을 의미한다.
타입종류
#submit
: 사용자로부터 입력받은 데이터(data)를 서버로 제출하는 버튼을 만들 수 있다.
: 해당 URL로 데이터가 전송된다.
<input type="submit" value="전송">
#text
: 사용자로부터 텍스트 입력을 받을 수 있다.
<input type="text" name="search">
#password
: 사용자로 부터 비밀번호를 입력받을 수 있다.(숫자 대신 작은 별 모양)
<input type="password" name="password">
#radio button
: 사용자로부터 여러 개의 옵션(option) 중에서 단 하나의 옵션만을 입력받을 수 있다.
이때 서버로 정확한 입력을 전송하기 위해서는 반드시 모든 input 요소의 name 속성이 같아야 한다.
: name 속성은 같게 value는 다르게 설정한다.
<input type="radio" name="변수명" value="값">
#checkbox
: 사용자로부터 여러 개의 옵션 중에서 다수의 옵션을 입력받을 수 있다.
체크박스는 라디오 버튼과는 달리 여러 개의 옵션을 한 번에 입력받을 수 있다.
이때 서버로 정확한 입력을 전송하기 위해서는 반드시 모든 input 요소의 name 속성이 같아야 한다.
: name 속성은 같게 value는 다르게 설정한다.
<input type="checkbox" name="변수명" value="값">
#file
<input> 태그의 type 속성 값을 "file"로 설정하면, 사용자로부터 파일을 전송받을 수 있다.
<input type="file" name="upload_file" accept="image/*">
#select
: 여러 개의 옵션이 드롭다운 리스트(drop-down list)로 되어 있으며, 그중에서 단 하나의 옵션만을 입력받을 수 있다.
option 요소는 드롭다운 리스트에서 선택할 수 있는 각각의 옵션을 표시한다.
multiple : 다중 선택
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form name="form6" method="post" action="nothingcgi">
<select name="car" multiple>
<option>당신이 구매하고 싶은 차종은?</option>
<option value="소나타">소나타</option>
<option value="에쿠스">에쿠스</option>
<option value="아반떼">아반떼</option>
</select>
</form>
</body>
</html>
#button
: 사용자가 누를 수 있는 버튼을 나타낸다.
<button type="button" onclick="alert('버튼 클릭!')">
//버튼 클릭
</button>
#hidden
: 사용자가 입력하지 않는 항목, 미리 정해져 있다
: 요청할 때 보이지 않지만 구분하는 목적으로 많이 쓰인다.
<input type="hidden" name="cmd" value="search">
'IT > HTML & CSS' 카테고리의 다른 글
| [HTML] - img 태그 오류 대체 이미지 노출 속성 onerror 문법 및 사용법 (0) | 2022.02.09 |
|---|---|
| [HTML] - 데이터(data) 속성 사용법 (0) | 2021.08.03 |
| [HTML 기초] - 3. HTML 태그 <table> 사용법 (4) | 2020.07.17 |
| [HTML 기초] - 2. HTML 자주 사용하는 태그 (0) | 2020.07.16 |
| [HTML 기초] - 1. HTML 기초 (0) | 2020.07.16 |
댓글