HTML 한바퀴 ⑤form,input

●form

-사용자가 입력한 데이터를 서버로 보낼때 사용한다.

-form안에 input태그를 넣고 type으로 다양한 유형 지정이 가능하며 method로 데이터 전달 방식을 설정한다.

-블록요소.

 

<form action="처리할 페이지 주소" method="입력한 데이터를 서버에 전달하는 방식"></form>

 

●method

-사용자로 부터 받은 데이터를 서버로 전달하는 방식에는 두 가지가 있다.

get	-주소(url)에 데이터를 추가하여 전달하는 방식. -눈에 보여지기도 하고 데이터의 크기가 제한적.
post	-데이터를 별도로 첨부하여 전달하는 방식. -외부에 보여지지 않고, 데이터 크기 제한x -get보다 보안성이 높음.

 

이 form 태그 안에 인라인 방식으로 action과 method를 넣어주고,

<form></form> 사이에 <input>을 넣어주면 된다.

 

 

●input

-type의 종류

text	텍스트를 입력. 글자가 나옴
password	비밀번호. 이걸로 해두면 안보여. ***이렇게 뜬다.	<form>    ID : <input type="text" name="username"><br>    PW : <input type="password" name="password"> </form>
radio	-이건 동그래미 선택 버튼. -여러 개 옵션을 만들어줘야 하고 선택 1개 하는것 -checked는 기본 선택. -name을 해줘야 좋다고 한다.	<form>    <input type="radio" name="선택" value="1회" checked>1회    <input type="radio" name="선택" value="2회">2회    <input type="radio" name="선택" value="3회">3회 </form>
checkbox	-이건 네모 체크 선택 박스 -여러 개 옵션을 만들어주고 다중 선택 가능.	<form>    <input type="checkbox" name="선택" value="1회" checked>1회    <input type="checkbox" name="선택" value="2회">2회    <input type="checkbox" name="선택" value="3회">3회 </form>
file	-이건 파일 첨부할때. -accept="image/*" 입력 파일의 확장자 및 종류를 명시하는것. 정확히는 모르겠다.	<form>    <input type="file" name="upload" accept="image/*"> </form>

-이 외에도 email(@가 꼭 들어가야함), number(숫자와 삼각버튼 생성) 등등 이 있는데, 지금은 tcp에 나온것들 기준으로 보는거라 추가는 생략.

 

select	-드롭 다운 리스트. -한 개 선택 -value값을 지정 해줘야 함.	<select name="fruit">       <option value="apple">사과       <option value="orange" selected>오렌지       <option value="peach">복숭아    </select>
textarea	-텍스트를 입력 받는 칸. -가로 행 row -세로 열 col	<form>    <textarea name="message" row="5" cols="30">     입력하시오. </form>
button	-누르는거	<button type="button" onclick="alert('wow')"> BTN </button>
submit	-데이터를 서버(폼핸들러)에 전송하는것. -전송하는 버튼이 생김.	<form action="media/request.php">    이름을 적어주세요.    <input type="text" name="name" value="이름"><br>    <input type="submit" value="전송"> </form>
fieldset	-데이터를 하나로 묶어주는 역할. -예시처럼 제목으로 묶으면 보더 라인이 생김.	<fieldset>    <legend>필드셋의 제목</legend>      <form action="media/request.php">       이름을 적어주세요.       <input type="text" name="name" value="이름"><br>       <input type="submit" value="전송">    </form> </fieldset>

 

-input에 쓸 수 있는 다양한 요소들. (input을 감싸는 form은 생략)

value	-초기값을 설정하는 것.	이름 <input type="text" name="name"><br> 학번 <input type="text" name="id" value="0000000"><br> 학과 <input type="text" name="depertment">
readonly	-사용자가 볼 수는 있지만 수정은 안됨. -데이터 전송시 함께 서버로 전송됨.	아이디<input type="text" name="id" value="아이디" readonly>
disabled	-readonly와 같지만 데이터 서버 전송이 안됨.	아이디<input type="text" name="id" value="아이디" disabled>
maxlenght	-문자 최대 길이	아이디<input type="text" name="id" mealength="10">
size	-문자를 보여줄 수 있는 칸의 문자 수.	아이디<input type="text" name="id" size="30">