<form></form>태그

프론트(html)에서 작성한 다수의 데이터를 서버에 전송할 때 사용하는 태그이다. form 태그는 데이터를 받을 수 있는 input 태그를 자식 태그로 사용한다. form태그는 속성으로 action, method를 필수로 설정한다. method는 기본 값이 존재하기 때문에 작성 안 하면 기본 값이 적용된다.

action : 요청을 보낼 주소값을 설정

method : 데이터를 전송하는 방식(get/post)을 설정한다. get방식이 기본 값이다.

method 속성

GET

데이터를 url 주소에 넣어서 전달하는 방식으로 전송되는 데이터 크기에 제한이 있다. 게시글 조회, 회원 조회, 조건 검색 등 간단한 방식을 조회할 때 사용한다. 웹 페이지 상단에 전송하는 데이터가 표시되기 때문에 전송할 데이터에 보안이 필요하다면 부적합한 방식이다.

💡 input에 작성된 데이터를 get방식으로 전달할 때 주소의 ?(물음표)뒤에 key=value 형식으로 전송된다.
Ex)http://서버주소:포트번호/서비스맵핑주소?name속성값=value속성값&name속성값=value속성값

<form action="07_하이퍼링크태그.html" method="get">
            <input type="text" name="userId">
            <input type="password" name="password"><br>
            <input type="submit" value="로그인">
</form>

주소 뒤에 입력한 아이디와 비밀번호가 다 노출된다.

POST

데이터를 request body에 넣어서 전달하는 방식으로 전송되는 데이터가 외부로 노출되지 않아 보안에 적합하다. 전송되는 데이터 크기에 제한이 없다. 파일 자체를 서버에 전송하거나 보안 필요한 데이터 전송에 사용할 때 주로 사용한다.

<form action="07_하이퍼링크태그.html" method="post">
            <input type="text" name="userId">
            <input type="password" name="password"><br>
            <input type="submit" value="로그인">
</form>

설정한 화면으로 이동될 뿐 입력한 데이터가 노출되지 않는다.

<input></input>태그

사용자에게 데이터를 입력 받을 때는 input 태그를 이용한다. input 태그의 type 속성에 따라 입력 받는 ui가 달라진다. 일반적으로 input 태그는 form 태그의 자식 태그로 사용한다. form 태그 밖에서도 사용 가능하다.

type에 따라 value 값을 고정으로 지정해줘야 하는 input태그도 있다. input태그에 작성된 내용은 서버에 key(name속성)=value(value속성)형식으로 전달된다. form태그와 같이 사용한 input태그는 반드시 name속성을 작성해줘야 한다.

text : 기본 문자를 입력 받을 때 가장 많이 사용

password : 보안이 필요한 문자를 입력 받을 때 사용

submit : 입력 받은 데이터를 서버에 전송할 때 사용하는 태그로 value 값에 적은 내용이 버튼의 문구로 표시된다.

<p><input type="text" name="testMsg" placeholder="메시지 입력"
            size="10" maxlength="10" minlength="2" required></p> 
<p><input type="password" name="password" minlength="8" required></p>
<input type="submit" value="전송">

placeholder 속성 : 사용자가 어떤 내용을 입력해야 하는지 알 수 있도록 공란일 때 띄워줄 문구를 출력해준다.

min/maxlength 속성 : 입력 받을 데이터의 최대, 최소 값을 지정할 수 있다.

size 속성 : 태그의 보여지는 크기를 지정해준다. 크기를 넘어가도 데이터를 입력할 수 있다.

submit, reset 속성

submit : form 태그에 설정된 action주소에 요청을 보내는 타입으로 버튼으로 표시한다.

reset : form 태그 내부에 있는 input 태그에 작성된 값을 모두 초기화하는 기능을 한다.

<form action="" method="get">
        <p><input type="text" name="userId" placeholder="아이디 입력"></p>
        <p><input type="password" name="password" placeholder="패스워드 입력"></p>
        <p><input type="submit" value="제출"></p>
        <!-- input 안에 입력된 값을 모두 취소 -->
        <p><input type="reset" value="취소"></p>
</form>

hidden : 버튼은 존재하지만 사용자에게 보여지지 않는 type이다. 클라이언트에게 보여주지 않지만 내부적으로 필요한 데이터를 전송할 때 사용한다. 버튼이 보이지 않아 데이터를 입력 받을 수 없기 때문에 서버에 전송할 데이터를 input 태그 내부에 value 속성에 반드시 작성해줘야 한다.

<p>
    <input type="hidden" name="userid" value="admin">
</p>
<p><input type="password" name="password"></p>
<p><input type="password" name="chpassword"></p>
<p><input type="submit" value="비밀번호 변경"></p>

💡 화면에는 input태그에 입력 받는 칸이 2개, submit 타입이 1개 표시 되지만 submit을 실행했을 때 전달된 데이터는 userid(key값)=admin(value값)을 포함한 3개의 데이터가 존재한다.

<button></button>태그

input<>의 type:button : input 태그는 단일 태그로 텍스트 노드가 없기 때문에 value에 버튼에 표시할 내용을 작성한다.

input태그의 button 타입 말고도 버튼을 생성할 수 있다.

button태그로 만들어진 버튼은 ui만 출력 되는 것이기 때문에 보통 자바스크립트를 이용해서 이벤트와 연결해서 사용한다. form 태그 안에 button 태그를 기본으로 사용하면 submit(전송)과 같은 기능을 한다. 속성을 주면 버튼 자체만으로 사용할 수 있다.

<button type="button" onclick="alert('아이디 중복 확인');">아이디 중복 확인</button>

onclick 속성은 해당 버튼을 클릭했을 때 실행할 이벤트를 지정하는 속성이다. alert(’문구’)를 작성하면 원하는 문구를 새로운 알림창으로 띄워준다.

button 태그를 이용하면 이벤트도 실행하고 submit 기능도 실행하는 상태가 된다. 단순히 버튼으로만 사용하려면 타입 지정하면 된다.

checkbox, radio 속성

checkbox 속성은 다중 선택이 가능한 네모난 ui의 체크박스를 만들어내고 radio 속성은 단일 선택만 가능한 동그란 ui의 체크박스를 만들어낸다. 두 타입 모두 다수의 태그로 생성했을 때 name값을 동일하게 맞춰야 하나의 name에 값을 저장해 보낼 수 있게 된다.

두 타입 모두 정해진 값에 대해 value 속성에 설정을 해야 해당 input 버튼을 체크했을 때 value에 저장된 값을 전송할 수 있다.

처음부터 체크해둘 항목에는 checked 옵션을 통해서 체크할 수 있고 체크된 항복은 사용자가 체크를 풀 수 있다.

화면에 표시되는 내용을 클릭해도 체크박스를 선택할 수 있게 label 태그로 묶어줄 수 있다.
문구만 묶은 상태로 label for 속성에 input의 id값을 주면 문구를 클릭했을 때 체크되도록 할 수 있다

<fieldset></fieldset>태그

해당 범위를 묶어서 선으로 구분해주는 태그로 <legend> 태그로 작성한 문구를 제목처럼 구분할 수 있게 해준다.

<div id="checkContainer">
	<form action="" method="get">
			<fieldset>
			<legend>취미</legend>
					<!-- 버튼까지 전체로 묶으면 해당 범위 안에서 클릭했을 때 체크됨. -->
					<label><input type="checkbox" name="hobby" value="코딩" checked>코딩</label>
					<input type="checkbox" name="hobby" value="운동" id="ex"><label for="ex">운동</label>
					<label><input type="checkbox" name="hobby" value="독서">독서</label>
      </fieldset>
			<fieldset>
          <legend>성별</legend>
          <!-- 문구만 클릭해도 연결된 버튼이 눌러질 수 있게 함. input버튼에 지정된 id값을 체크 -->
          <label for="male">남</label> <label for="female">여</label><br>
          <input type="radio" name="gender" value="F" id="female">여
          <input type="radio" name="gender" value="M" id="male">남
      </fieldset>
      <p><input type="submit" value="제출"> <input type="reset" value="취소"></p>
 </form>
</div>