우리는 웹 사이트를 사용하면서
입력을 통해서 데이터를 서버로 보내야하는 경우가 있다
예를 들어서 로그인을 하는 경우
아이디, 비밀번호를 입력해서 데이터를 서버에 전송한다.
이러한 태그를 폼이라고 한다.
폼을 만들어보자
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://전송하기 위한 서버 주소">
<p>아이디 : <input type="text" name="id"></p>
<p>비밀번호 : <input type="password" name="pwd"></p>
<input type="submit">
</form>
</body>
</html>코드를 한 줄씩 읽어보면
form action="해당 서버로 전송"
input type="입력타입" name="입력받는 컨트롤에 이름"
input type="패스워드처리입력" name="입력받는 컨트롤에 이름"
input type="버튼"
이렇게 해석할 수 있다. 어렵지 않다 우리가 입력해서 전달하고자 하는 데이터에 타입과 이름만 주어진 것이다.
html 파일을 열어보면,
입력을 할 수 있는 구조가 되었다!
이제 여러가지 폼 태그에 대해 알아보자!!
이번에는 텍스트 필드를 만들어 보자!
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/login.php">
<p>아이디 : <input type="text" name="id"></p>
<p>비밀번호 : <input type="password" name="pwd"></p>
<p>textarea :
<textarea cols="50" rows="10">default value</textarea>
<input type="submit">
</form>
</body>
</html>textarea는 텍스트 내용을 여러줄 입력할 수 있게 만들어졌다.
이때 속성을 가지고 여러 내용을 입력할 수 있다.
cols 속성은 열이라는 컬럼을 명시한다.
rows 속성은 행이라는 라인수를 명시한다.
Dropdown List - 제한된 선택지에서 선택을 하는 방식
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="">
<h1>색상</h1>
<select name="color">
<option value="red">붉은색</option>
<option value="black">검은색</option>
<option value="blue">파란색</option>
</select>
<input type="submit">
<h1>색상</h1>
<select name="color22" multiple>
<option value="red">붉은색</option>
<option value="black">검은색</option>
<option value="blue">파란색</option>
</select>
<input type="submit">
</form>
</body>
</html>form action으로 전송할 서버 경로를 지정하고
select name="선택지 이름"으로 선택을 하는 select를 사용해서 이름을 정해준다.
option value="옵션에 값"으로 선택지에 선택할 항목으로 지정 값을 정해준다.
쉽게 설명하면 선택지를 주고 항목을 보여준것이다. 붉은색에 해당하는 값은 red로 url에서는 color=red로 이름=값을 표시한다.
* select에서 mutiple를 사용하면 여러 항목을 선택할 수있다.
checkbox와 라디오
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="서버 주소">
<p>
<h1>색상</h1>
붉은색 : <input type ="radio" name="color" value="red">
검은색 : <input type ="radio" name="color" value="black" checked>
파란색 : <input type ="radio" name="color" value="blue">
</p>
<p>
<h1>여러 색상 선택</h1>
95 : <input type ="checkbox" name="size" value="95">
100 : <input type ="checkbox" name="size" value="100" checked>
105 : <input type ="checkbox" name="size" value="105" checked>
</p>
<input type="submit">
</form>
</body>
</html>단일 선택을 하는 경우 여러 항목 중 한가지를 선택하는데 이때 라디오가 사용된다.
다중 선택을 하는 경우 여러 항목을 선택하는데 이때 체크 박스가 사용된다.
input type에 checked를 사용하면 미리 체크가 되어있어서 선택을 유도할 수 있다.
지금까지 폼 태그에서 데이터 전송으로 눈에 보이는 데이터 전송이었다.
이번에는 눈에 보이지 않지만 서버에 데이터를 보내는
Hidden을 사용해보자
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="서버 주소">
<input type="text" name="id">
<input type="hidden" name="hide" value="TeamH4C">
<input type="submit">
</form>
</body>
</html>우리가 평소에 사용하던 text 타입은 실제로 눈에 보인다.
하지만
hidden 타입을 사용하면 ui로 볼 수 없다. 그래도 데이터 전송은 이루어 진다.
추후 우리는 자주 사용할 타입이다.
'Web' 카테고리의 다른 글
| HTML 태그 정리 01 (0) | 2021.02.11 |
|---|---|
| HTML 페이지 기본 (0) | 2021.02.11 |
| HTML이란? (0) | 2021.02.11 |
