[웹 프로그래밍 기초] 입력 양식 태그

입력 양식 태그

입력 양식은 사용자에게 정보를 입력 받는 공간으로 입력 양식 태그 사용
일반적으로 서버 ➡️ 클라이언트로 데이터를 전달.
하지만 회원가입,로그인,검색 등 버튼을 클릭하는 순간에는 클라이언트 ➡️ 서버로 데이터 전송

입력양식은 form태그 를 사용해 생성

데이터 전달 방식

form은 전송할 방식과 목적지 정보를 가지며, 이를 속성으로 표현

<form action="전송 위치" method="전송 방식">
</form>

전송 방식

1. GET 방식 - 주소에 데이터를 입력해서 전달
2. POST 방식 - 주소 변경 없이 비밀스럽게 데이터 전달

GET/POST의 차이

1. 웹 브라우저에 표시되는 URL의 차이
2. GET은 폼 데이터를 URL 끝에 붙여서 눈에 보이게 보내지만, POST 방식은 내부적으로 보이지 않게 전송
3. GET방식은 데이터가 외부에 노출되어 보안에 취약, 데이터 보안이 필요한 경우 POST방식 사용

입력 양식 종류

태그	속성	설명
form	보이지 않음	입력 양식의 시작과 끝 표시
input	text	글자 입력 양식 생성
	button	버튼 생성
	checkbox	체크 박스 생성
	file	파일 입력 양식 생성
	hidden	해당 내용 표시 안 함
	image	이미지 형태 생성
	password	비밀번호 입력 양식 생성
	radio	라디오 버튼 생성
	reset	초기화 버튼 생성
	submit	제출 버튼 생성
textarea	cols/rows	여러 행의 글자 입력 양식 생성,cols는 너비/rows는 높이
select,optgroup,option		선택 양식 생성,옵션 그룹화,옵션 생성
fieldset,legend		입력 양식의 그룹 지정,입력 양식 그룹의 이름 지정

input태그 추가 설명

• label 태그
  label 태그 는 input 태그를 설명할 때 사용
  label 태그의 for 속성에 input태그의 아이디를 입력해서 label태그가 어떤 input태그를 나타내는지 알려준다.

<input id="dog" type="radio" name="animal" value="d">
<label for ="dog"> 강아지 </label>

• name 속성
  input태그에서 name속성은 반드시 가져야 한다.(type속성이 submit/reset은 제외)
  원래 name은 유일해야 하지만 radio의 name은 같아야 한다. 그래야 1개만 선택 가능

• value 속성

<input type="submit" value="회원가입">

vaule속성은 내부 값을 지정한다.

예시)

    <table>
        <tr>
            <h1>회원가입</h1>
        </tr>
       <hr>
        <form>
            <tr>
                <td>아이디</td>
                <td>
                    <input type="text">
                    <input type="button" value="중복확인">
                </td>
            </tr>
            <tr>
                <td>비밀번호</td>
                <td><input type=password></td>
            </tr>
            <tr>
                <td>이름</td>
                <td><input type=text></td>
            </tr>
            <tr>
                <td>성별</td>
                <td>
                    <input id="woman" type="radio" name="gender" value="w">
                    <label for="woman">여자</label>
                    <input type="radio" name="gender" value="m" >
                    <label for="man">남자</label>
                </td>
            </tr>
        </table>
        <hr>
        <input type="submit" value="회원가입">
        <input type="reset">
        </form>