🌈 HTML 기초 - from 태그
🔥 form 기본
🔥 form 태그 : 텍스트 입력
🔥 form 태그 : Dropdown List(combo box)
🔥 form 태그 : radio, checkbox
🔥 form 태그 : button
🔥 form 태그 : hidden
🔥 form 태그 : label
🔥 form 태그 : method
🔥 form 태그 : file upload
1. form 기본
- 로그인을하거나 정보를 입력하는 등 글을 입력할 때를 포함하여 User의 행위를 서버로 전송할 때 사용
- action 속성 : 입력한 정보를 보낼 서버 주소 지정(🔍 http://localhost/login.php)
- input에 name 속성을 통해 form의 action이 가르키는 곳으로 정보가 전달되는 것을 url을 통해 확인
- ID(김철수), PW(12345), LOCATION(seoul)을 입력했을 때 변화되는 URL 아래 참조
- action 위치+"?" 뒤에 name과 해당 input에 입력값이 매칭되어 나타나는 것을 볼 수 있음
- method 속성은 HTTP mehtod를 지정하는 방식으로 post(POST메서드) 방식과 get(GET메서드) 방식으로 나뉨
- method를 지정안해주면 get방식이 default임
- 🔍
<form action="URL 주소" method='get'></form> - 🔍
<form action="URL 주소" method='post'></form>
- target 속성은 action에서 지정한 경로로 이동할 때, 새로운 브라우저에 띄울지, 현재 브라우저에 띄울지 지정할 수 있음
- target를 지정안해주면 _self방식이 default임
- 🔍
<form action="URL 주소" target="_self"></form> - 🔍
<form action="URL 주소" target="_blank"></form>
✍🏻 html
<html> <body> <form action="http://localhost/login.php"> <p>ID : <input type="text" name="id"/></p> <p>PW : <input type="password" name="pwd"/></p> <p>LOCATION : <input type="text" name="location"/></p> <p><input type="submit" /></p> </form> </body> </html>
2. form 태그 : 텍스트 입력
- input 태그의 value 속성은 default 값을 적어둘 수 있고, placeholder 속성은 음영으로 나타나기 때문에 텍스를 입력하면 사라짐
- input 태그의 textarea 타입은 장문의 텍스트를 입력할 수 있고, cols 속성과 rows속성을 이용하여 크기를 지정할 수 있음
- 또한 input 태그의 textarea 타입은 다른 input 타입과 다르게 닫는 태그(
</textarea>)를 사용
✍🏻 html
<html> <body> <form action=""> <p>id : <input type="text" name="id" value="I am value" /></p> <p>password : <input type="password" name="pwd" /></p> <p> <textarea name="textarea" cols="100" rows="10" placeholder="I am placeholder" </textarea> </p> <p><input type="submit" /></p> </form> </body> </html>
3. form 태그 : Dropdown List(combo box)
- Dropdown List는 제한된 공간안에서 여러개의 선택지를 선택할 수 있게 해주는 태그임
<select>태그로 그룹을 지정하고,<option>태그로 목록을 입력함<form>태그를 통해 서버로 data를 전송해야하기 때문에<select>의 name값을 지정하고,<form>태그의 action 속성으로 전송될 곳을 입력<select>태그에 mutiple 속성은 List를 다중선택할 수 있는 UI로 바꿔줌- 단, 사용자가 컨트롤키를 누르고 다중선택해야하는 불편함이 있기 때문에 이런 방식으로는 사용하지 않음
✍🏻 html
<html> <body> <form action="http://localhost/color.php"> <h1>Color(one pick)</h1> <select name="color1"> <option value="black">black</option> <option value="red">red</option> <option value="blue">blue</option> <option value="yellow">yellow</option> <option value="white">white</option> </select> <h1>Color(multi pick)</h1> <select name="color2" multiple> <option value="black">black</option> <option value="red">red</option> <option value="blue">blue</option> <option value="yellow">yellow</option> <option value="white">white</option> </select> <input type="submit" /> </form> </body> </html>
4. form 태그 : radio, checkbox
- radio 버튼은 카세트에 버튼처럼 1개만 선택할 수 있는 버튼으로,
<input>태그의 radio 타입을 지정하여 사용함 - 여러개의 radio 버튼이 서로 유기적으로 작동할 수 있도록 지정하려면
<input>의 name 속성 값을 일치시켜주면 됨 - radio 버튼은 name값이 같은 것들끼리 그룹핑이됨
- 다중선택을 가능하게 하는 list는
<input>태그의 checkbox 타입을 지정하여 사용함 - 목록들을 그루핑하기 위해서는 name값을 일치시켜주면되고, checked 속성을 넣어주면 default 값으로 선택되어 있음
- value 통해 서버에 전달될 값의 이름을 지정함
- 색상은 black, 크기는 100을 선택 후 submit 버튼을 누르면 아래처럼 전달됨
✍🏻 html
<html> <body> <form action="http://localhost/order.php"> <p> <h1>Color(one pick)</h1> red : <input type="radio" name="color" value="red"/> balck : <input type="radio" name="color" value="black" checked/> blue : <input type="radio" name="color" value="blue"/> </p> <p> <h1>Size(multi pick)</h1> 95 : <input type="checkbox" name="size" checked value="95"/> 100 : <input type="checkbox" name="size" checked value="100"/> 105 : <input type="checkbox" name="size" checked value="105"/> </p> <input type="submit" /> </form> </body> </html>
5. form 태그 : button
<input>태그의 submit 타입은<form>태그 안에서 함께 사용하며,<form>태그 내 입력된 값들을<form>태그의 action 주소로 전송하는 버튼임- 이 submit 버튼은 기본 값이 제출로 되어있으나, 이름을 바꾸고 싶다면 value 속성으로 지정할 수 있음
<input>태그의 button 타입으로도 버튼을 만들 수 있으나, submit과 차이는 전송하는 기능이 없다는 것임- 즉 type="submit"은
<form>와 함께 사용되어 input값을 전송하는 역할을 하지만, type="button"은 html만 사용했을 때는 그냥 버튼임 - 이에 type="button"을 javascript와 연계하여 사용하면 여러가지 활용도를 갖음
- type="reset" 또한 버튼 형태의 UI를 가지고 있고, 이 버튼을 클릭하면 해당
<form>태그안에 입력된 모든 값이 초기화됨
✍🏻 html
<html> <body> <form action="http://localhost/order.php"> <p><input type="submit" value="My input type is submit" /></p> <p> <input type="button" value="My input type is button" onclick="alert('You click button')" /> </p> <p><input type="reset" value="My input type is reset" /></p> </form> </body> </html>
6. form 태그 : hidden
- type="hidden"은 서버로 데이터를 전송할 때 UI가 필요없거나, 몰래 데이터를 전송해야할 때 사용
✍🏻 html
<html> <body> <form action="http://localhost/hidden.php"> ID : <input type="text" name="id" /> <input type="hidden" name="hide" value="jaewon" /> <input type="submit" /> </form> </body> </html>
7. form 태그 : label
input태그를label태그와 매칭시켜주면,input태그의 이름을 클릭만해줘도input태그에 커서가 생김- 즉,
input태그와 그를 지칭하는 텍스트를 그루핑하여 사용성을 높임 input태그를label태그를 매칭시키는 방법은input태그의 id속성 값과label태그의 for속성 값을 일치시켜주면 됨- 또 다른 방법은
label태그 안에input태그를 넣어주는 방법으로도 그루핑 가능
✍🏻 html
<html> <body> <form action=""> <p> <label for="id_txt">id : </label> <input type="text" name="id" id="id_txt" /> </p> <p> <label for="pwd_text">password : </label> <input type="password" name="pwd" id="pwd_text" /> </p> <p> <label>RED<input type="checkbox" name="color" value="red" /></label> <label for="color_blue">BLUE</label> <input type="checkbox" name="color" value="blue" id="color_blue" /> </p> <p><input type="submit" name="textarea" /></p> </form> </body> </html>
8. form 태그 : method
- 사용자가 입력한 정보를 서버쪽으로 전송하는 방법이 form이 하는 기능이라면, 이 방법의 종류를 지정하는 것이 method임
- 대표적으로 get방식과 post 방식이 있음
- get방식으로 데이터를 서버로 전송하면, 민감한 정보가 url에 모두 노출되는 문제가 있음
- 즉, get방식은 url을 통해서 데이터를 전송함
<form>태그에 method 형식을 지정하지않으면, default 값으로 get으로 지정됨
✍🏻 html : get 방식 전공
<html> <body> <form action="http://localhost/method.php" method="get"> <label for="id">ID : </label> <input type="text" name="id" id="id" /> <label for="password">Password : </label> <input type="password" name="pwd" id="password" /> <input type="submit" value="get" /> </form> </body> </html>
- 이에 때론 정보를 감춰서 전달할 필요가 있고, 이때 post 방식을 사용함
<form>태그를 post 방식으로 지정하려면 method 속성에 post를 입력함- 어떤 방식으로 정보를 전송하는지를 결정하는 것은 server쪽 개발자의 영역임
- 즉, 백엔드 개발자가 get으로 전송할지, post로 전송할지 결정하여 알려줌
✍🏻 html : post 방식 전공
<html> <body> <form action="http://localhost/method.php" method="post"> <label for="id">ID : </label> <input type="text" name="id" id="id" /> <label for="password">Password : </label> <input type="password" name="pwd" id="password" /> <input type="submit" value="post" /> </form> </body> </html>
9. form 태그 : file upload
- 파일을 업로드 할 때에는,
<form>태그에 속성으로 method를 "post"방식으로 지정해주고, enctype 속성을 "multipart/form-data"로 설정해야 함 - 또한
<input>의 타입은 file로 지정 - 업로드한 파일은 form태그에서 지정한 경로 안에 저장되기 때문에 upload.php 파일이 존재하는 디렉토리에 저장됨
✍🏻 html
<html> <body> <form action="http://localhost/upload.php" method="post" enctype="multipart/form-data" <input type="file" name="profile" /> <input type="submit" /> </form> </body> </html>
Keep Going, Keep Coding!