📋오늘의 목표📋
서버에 데이터를 전달하기 위한 요소를 배워보자. 📕폼(FORM)이란?
사용자가 텍스트를 입력하고나 선택하고 클릭하는 행위를 통해 서버에 전달하는 경우
📖<input>요소
내용이 없는 빈태그로 type속성을 통해 다양한 입력형태를 만들 수 있다.
📘type="text"
단순한 텍스트를 입력한다.
placeholder: 보여지는 내용
<input type="text" placeholder="아이디">👉실행결과
📘type="password"
입력이 공개되지 않는다.
비밀번호: <input type="password">👉실행결과
비밀번호:
📘type="radio"
중복이 불가능한 선택항목을 만든다.
name: radio를 상호배타적인 관계를 묶어줌.checked: 기본선택으로 선택을 해줌
<input type="radio" name="gender" checked > 카드결제
<input type="radio" name="gender"> 계좌이체👉실행결과
카드결제
계좌이체
📘type="checkbox"
중복이 가능한 체크박스를 만든다.
<input type="checkbox" name="hobby"> 등산
<input type="checkbox" name="hobby"> 독서
<input type="checkbox" name="hobby"> 운동👉실행결과
등산
독서
운동
📘type="file"
파일업로드를 가능하게 해준다.
<input type="submit">👉실행결과
📘type="submit"
<form>의 값을 전송하는 버튼
<input type="submit">📘type="reset"
<form>의 값을 초기화하는 버튼
<input type="reset">✍️예시코드
<form action ="./test">
<input type="checkbox" name="hobby"> 등산
<input type="checkbox" name="hobby"> 독서
<input type="checkbox" name="hobby"> 운동
<input type="submit">
<input type="reset">
</form> 👉실행결과
등산 독서 운동📘type="button"
동작이 정해지지 않은 버튼
<input type="button">👉실행결과
📄velue 속성
velue: submit,reset,button의 표시되는 이름을 바꿔줌
<input type="submit" velue="전송">
<input type="reset" velue="취소">
<input type="button" velue="버튼">👉실행결과
📖 type ="image"
submit버튼과 동일하게 작동하지만 버튼의 이미지를 설정할 수 있음
<form action ="./test">
<input type="image" src="https://img.freepik.com/premium-vector/hand-click-button- mouse-cursor-web-pointer-press-or-touch-website-element-vector-computer- navigation_152104-510.jpg" width="50" height="50">
</form>
👉실행결과
📖<select> 태그
드롭다운형태로 선택할수 있는 태그
selected: 기본 선택 속성값
<select>
<option selected>서울</option>
<option>경기</option>
<option>강원</option>
</select>👉실행결과
<option selected>서울</option>
<option>경기</option>
<option>강원</option>
📖<textarea>태그
여러줄의 텍스트를 입력할 때 사용한다.
cols: 가로 크기를 조절하는 속성rows: 세로 크기를 조절하는 속성(화면에 보여지는 줄 수)placeholder: 보여지는 내용
<textarea rows="5" cols="30" placeholder="자기소개는 짧게 써주세요">
</textarea>👉실행결과
📖 <button>태그
버튼을 만드는 태그로 type이 submit,reset,button이 있다.
빈태그가 아니기 때문에 직접 내용을 설정할 수 있다.
<button type="submit">버튼 내용 설정 가능</button>
<button type="reset"> 버튼 내용 설정 가능</button>
👉실행결과
버튼 내용 설정 가능
버튼 내용 설정 가능
📕외적인 폼 관련 요소
📖 <label>태그
폼요소와 연결해주기 위함으로 사용이 되고 웹 접근성향상에 도움이 된다. (필수)
연결시켜주고자 하는 form요소의 id속성값과 <label>의 fot속성값을 동일하게 작성해야한다.
label을 클릭하먄 해당 폼요소을 선택한 것처럼 동작한다.
<label for="id"> 아이디: </label> <input type="text" id="id" placeholder="아이디">👉실행결과
아이디:
✍️ radio, checkbox예시코드
<input type="checkbox" name="hobby" id="exercise"> <label for="exercise"> 운동 </label>
<input type="checkbox" name="hobby" id="read"> <label for="read"> 독서 </label>👉실행화면
운동
독서
📖<fieldset>,<legend>태그
<fieldset>: 여러 개의 폼 요소를 그룹화할때 사용<legend>: 폼 요소의 제목으로<fieldset>내부에서 가장 먼저 작성
<fieldset>
<legend>첫번째 그룹</legend>
<input type="checkbox" name="hobby" id="exercise"> <label for="exercise"> 운동 </label>
<input type="checkbox" name="hobby" id="read"> <label for="read"> 독서 </label>
</fieldset>
<fieldset>
<legend>두번째 그룹</legend>
<label for="id"> 아이디: </label> <input type="text" id="id" placeholder="아이디">
</fieldset>👉실행결과
첫번째 그룹 운동 독서 두번째 그룹 아이디:<form>태그
폼 데이터를 그룹화하여 서버에 전송한다.
action: 데이터를 처리하기 위한 서버의 주소method: 데이터를 전송하는 방식을 지정
-get:데이터가 주소창에 붙어 노출된다.
-post: 데이터가 노출되지 않는다.
<form action="./주소" method="post">
</form>🌐 필수 참고 사이트
https://developer.mozilla.org/enUS/docs/Web/HTML/Element/input
🏅오늘 느낀 점🏅
예전에 공모전에 나갔을 때 웹사이트를 만든 적이 있는데 그 때 드롭다운을 요청한 기억이 새록새록 난다.
velog에 정리하다보니까 평소 걸리는 시간보다 한 2~3배는 더 걸리는 것 같다.
그렇지만 다음에 웹사이트를 만들 때 내가 볼 수 있고 활용할 수 있다는 생각을 하니까 뿌듯하다.
남은 공부도 화이팅해야겠다~