1. <form> 태그
사용자가 입력한 데이터를 서버로 데이터를 전송할 때 사용하는 태그입니다. <input> 태그를 통해 사용자가 데이터를 입력 받을 수 있습니다. Type에 text, pass word를 통해 속성값을 지정해 줄 수 있으며, 서버로 전송할 떄 사용하는 버튼은 submit버튼으로 input태그의 type에 submit을 지정하여 서버로 데이터를 전송합니다. 우리가 입력한 정보가 어디에 있는 서버로, 어디에 전송을 할껀지 지정하는 태그가 form태그입니다. 이러한 정보를 form태그의 action 속성값에 지정합니다. 또한 각각의 컨트롤(필드)를 구별하기 위해 이름을 지정해줍니다. 예제는 action 속성값에 서버로 전송하는 부분이 있지만 이부분은 무시하고 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>주소 : <input type="text" name="address"></p>
<input type="submit">
</form>
</body>
</html>
2. 데이터 입력
사용자로부터 텍스트를 입력받는 form 태그에 대해서 알아보겠습니다. 서버에 값을 전송하려면, 이게 무엇인지 알아야 하기 때문에 name속성을 써주어야 합니다. 또한 기본적으로 어떤 문자가 정해져있으면 좋겠다 하면 value라는 속성으로 default 값을 지정해 줄 수 있습니다. 다른 형태의 필드로는 <textarea>가 있습니다. 여러 줄을 입력하려고 할 때는 이 태그를 사용해야 합니다. 그리고 화면의 크기를 조정하기 위해서 cols, rows를 사용합니다. 기본 값을 지정할 때는 태그 안쪽에 적어 주면 됩니다.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="">
<p>text : <input type="text" name="id" value="default value"></p>
<p>password : <input type="password" name="pwd" value="default value"></p>
<p>textarea : <textarea cols="50" rows="2">default value</textarea></p>
</form>
</body>
</html>
3. 선택(selection)
Dropdown List는 제한된 공간 안에서 여러개의 선택지를 선택 할 수 있게 해줍니다. <option> 태그 안에 각각의 항목들을 넣어 줍니다. 각각의 것들을 선택지로 만들어줍니다. 그리고 <select>를 통해 선택을 할 수 있게 해줍니다. 사용자가 선택한 걸 서버쪽에 전달하려면 select에 이름을 지정해 주어야 합니다. 또한 각각의 옵션에 컴퓨터가 정보를 받아들이는걸 쉽게 하기 위해 value속성을 지정해 줍니다. 붉은색 이런 정보는 사람이 보기 좋은 정보입니다. 이렇게 해서 서버에 전달하게 되면 서버에는 붉은색을 선택 시 color=red가 넘어갑니다.
또한 여러가지를 한꺼번에 고르고 싶을 수 있습니다. select 옆에다가 multiple이라는 속성 이름을 적어주면 됩니다. 이러면 사용자가 여러가지를 선택할 수 있는 ui가 만들어집니다. 그런데 컨트롤 키를 누르고 마우스 클릭을 해야하는데 이런 건 사용자가 알 수 없으면 편하지 않습니다. 그렇기 때문에 checkbox를 많이 사용합니다.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/color.php">
<h1>색상</h1>
<select name="color">
<option value="red">붉은색</option>
<option value="black">검은색</option>
<option value="blue">파란색</option>
</select>
<h1>색상2 (다중선택)</h1>
<select name="color2" multiple>
<option value="red">붉은색</option>
<option value="black">검은색</option>
<option value="blue">파란색</option>
</select>
<input type="submit">
</form>
</body>
</html>
복수개를 선택할 수 있게 해주는, Radio, checkbox가 있습니다. 옛날의 자동차의 라디오 버튼은 하나만 선택할 수 있었습니다. 그렇게 하려면 name을 같게해주면 됩니다. 같은 이름으로 되있으면 하나의 버튼만 선택됩니다. 같은 그룹에 여러개를 선택할 수 있는게 checkbox입니다. 같은 name을 가지고 있는 것들을 여러 개 선택할 수 있습니다.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/order.php">
<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>
4. 버튼(button)
Input 타입에 type을 submit으로 했을 때 기본 값은 제출이고, 이것을 바꾸고 싶으면 value="전송" 이런식으로 써주면 됩니다. 또한 type에 button을 지정해주고, value로 값을 지정해줄 수 있습니다. 이 버튼은 자바스크립트를 사용할 때 사용합니다. onclick 속성에 자바스크립트 함수를 호출하거나 할 수 있습니다. Reset은 사용자가 입력한 모든 정보가 초기화됩니다.
<html>
<head><meta charset="utf-8"></head>
<body>
<form action="http://localhost/form.php">
<input type="text">
<input type="submit" value="전송">
<input type="button" value="버튼" onclick="alert('hello world')">
<input type="reset">
</form>
</body>
</html>
5. Hidden field
서버로 데이터를 전송해야하는데, UI가 필요 없거나 몰래 서버쪽으로 데이터를 전송해야할 경우에 사용합니다.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/hidden.php">
<input type="text" name="id">
<input type="hidden" name="hide" value="egoing">
<input type="submit">
</form>
</body>
</html>6. 컨트롤의 제목 label
무언가에 이름표라는 걸 표시해줍니다. 특별한 기능이 있는게 아닙니다. 각각의 레이블들이 누구의 이름표인지 연결 시켜 주어야 합니다. 이때 사용하는 것이 바로 for라는 속성입니다. 텍스트라는 레이블을 클릭하면 텍스트 필드에 커서가 위치하는걸 볼 수 있습니다. 또한 아이디 값을 입력하기 귀찮을 때, 레이블 태그 안에 input태그를 넣는 것 입니다. 그러면 똑같이 input태그 앞에 문자열이 label이 됩니다.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/hidden.php">
<p>
<label for="id_txt">text</label> :
<input id="id_txt" type="text" name="id" value="default value">
</p>
<p>
<label>password</label> :
<input type="password" name="pwd" value="default value">
</p>
<p>
<label for="color_blue">
<input id="color_blue" type="checkbox" name="color" value="blue"> 파란색
</label>
</p>
<input type="submit">
</form>
</body>
</html>
7. method
정보를 URL로 전달할때나, 감춰서 사용할때가 필요합니다. 감춰서 사용할 때 쓰는 방법이 POST 방식입니다. Method를 지정하지 않으면 기본적으로 GET방식으로 동작하게 약속되어있습니다. Method를 post로 세팅해 준다면, URL에 정보가 나타나지 않는 것을 볼 수 있습니다. Form을 이용해서 데이터를 전송할 때는 거의 100% post방식으로 데이터를 전송하시면 됩니다. 서버기술자가 get방식을 통해 전달해달라고 한다면 그 때 get 방식으로 데이터를 전송하면 됩니다.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/method.php" method="post">
<input type="text" name="id">
<input type="password" name="pwd">
<input type="submit">
</form>
</body>
</html>8. 파일업로드
여기서는 서버쪽 지식이 없어도 HTML쪽에서는 이렇게 하면 된다는 것을 보여주는 예제를 진행해보겠습니다. Input태그의 type을 file로 설정하면 파일을 자신의 컴퓨터에서 선택할 수 있는 버튼이 나타납니다. 파일을 서버로 전송하기 위해서 form태그를 사용하였습니다. 그리고 enctype을 multipart/form-data로 지정을 해야 합니다. 파일을 업로드 하는 기능이 하나라도 있다면 반드시 method는 "post", enctype은 "multipart/form-data"로 설정해야 합니다. 이제 나머지는 서버쪽 엔지니어가 처리할 것 입니다.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="profile">
<input type="submit">
</form>
</body>
</html>'HTML' 카테고리의 다른 글
| [HTML] View Port (0) | 2019.05.08 |
|---|---|
| [HTML] 정보로서의 html (0) | 2019.05.08 |
| [HTML] html table (0) | 2019.05.08 |
| [HTML] html 태그(p, br, img) (0) | 2019.05.02 |
| [HTML] html 문서의 구조 (0) | 2019.05.02 |
