모든 저작권은 <생활코딩>의 생산자인 <egoing>님에게 있습니다.
문제시, 비공개로 전환하겠습니다.
- 입력양식 form -
사용자가 입력한 정보를 서버로 전송할 때 사용하는 태그
예제 |
<html> <form action="http://localhost/login.php"> ===> 이곳으로 id, pwd, address를 모두 전송한다. <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> |
- 텍스트 입력 -
예제 |
<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> |
- 선택: dropdown list -
예제 |
<html> |
- 선택: radio button & checkbox list -
예제 |
<html> <body> <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> |
- 버튼 button -
javascript와 함께 쓰인다.
예제 |
<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> |
- 데이터 전송 (hidden) -
ui는 없지만 server로 정보 전송할 때 사용한다.
예제 |
<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> |
- label : 컨트롤의 제목 -
<label>은 폼태그의 이름을 지정하는 태그
방법 두가지 1. label for=""와 이름을 지정하려는 태그 input id=""를 같은 값으로 묶어준다.
2. 이름을 지정하려는 input태그를 label태그로 감싸준다. -> 이렇게 하면 label, input에 해당하는 UI 중 아무거나 클릭해도 해당 필드에 포커스가 이동한다.
=> 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 for ="password">password</label>: </p> <label>textarea: <textarea rows="2">default value</textarea> </label> </p> <p> <label> <input type="checkbox" name="color" value="붉은색"> </label> <label for ="color_blue"> <input id="color_blue" type="checkbox" name="color" value="blue">파란색 </label> </p> </form> </body> </html> |
- method -
정보를 감춰서 전달할 때 쓰는 방법 method="post"
method의 default는 "get"이다.
get은 url로 데이터를 전송한다.
예제 |
<html> |
- 파일 업로드 -
예제 |
<html> <meta charset="utf-8"> </head> |
upload.php |
<?php $source = $_FILES['profile']['tmp_name']; $dest="./".basename($_FILES['profile']['name']); move_uploaded_file($source,$dest); ?> <!DOCTYPE html> <html> <head <meta charset="utf-8"> <title></title> </head> <body> <img src="<?=$_FILES['profile']['name']?>" alt=""/> </body> </html> |
댓글