728x90

우리는 웹 사이트를 사용하면서 

 

입력을 통해서 데이터를 서버로 보내야하는 경우가 있다

 

예를 들어서 로그인을 하는 경우 

아이디, 비밀번호를 입력해서 데이터를 서버에 전송한다.

이러한 태그를 폼이라고 한다.

 

을 만들어보자

<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로 볼 수 없다. 그래도 데이터 전송은 이루어 진다.

 

추후 우리는 자주 사용할 타입이다.

728x90

'Web' 카테고리의 다른 글

HTML 태그 정리 01  (0) 2021.02.11
HTML 페이지 기본  (0) 2021.02.11
HTML이란?  (0) 2021.02.11

+ Recent posts