※블로그 내용은 저 '개인'의 기준으로 더 필요하다고 생각되는, 또는 한번 더 짚어보는 의미로 대부분 직접 필기한 것입니다. 수희 혼자 볼라고 쓴 블로그
1. form 기초, input.
form 이란 ?
웹 상에서 사용자의 입력 을 받아서 , 클라이언트에서 서버로 정보를 제출하기 위한 요소
/ <태그 사용
주요 속성 (
★action : 폼 데이터를 보낼 URI 지정
submit, button 등을 통해 사용자가 데이터를 제출하는 이벤트가 발생했을 때 , 입력받은 데이터를 어디로 보낼지 지정
참고 ) URI 란 ? Uniform Resource Identifier. 리소스의 위치를 식별하기 위한 문자열 .(cf URL 은 URI 의 하위 개념)
다른 웹 페이지 주소 , 서버의 주소 , 프로젝트 내 다른 HTML 파일 등
method : GET, POST 등 양식을 제출할 때 사용할 HTTP 메소드
GET : action 에 명시한 URI 에 Query Parameter
(? 뒤로 오는 값 형태로 이어 붙여서 전송 (Default, 기본값
예 ) http://my server host.com?fieldName 1 =value&fieldName 2 =
★url 주소에 그대로 드러나기 때문에 보안에 취약함
POST : Request Body 에 데이터를 넣어서 전송
백엔드 개발자와 협의 필요하나 , 보통 실무에서는 POST 로 보내는 경우가 많음
input 태그란 ?
input 은 인라인 요소이다
<form> 태그는 입력 받을 부분 전체를 감싸는 껍데기 같은 느낌
<form> 태그 하위에 <input>, <select>, <textarea> 태그를 작성하여 실제 입력을 받음.
★인풋 태그는 가장 대표적인 form 요소
주요 속성
type : type 속성의 값에 따라 input type 이 정해지며 , 여러가지 종류의 입력을 받을 수 있다
<input type=" text">
★★text 이외에 인풋 속성은
email , password , checkbox , radio , button , submit , date(날짜 양식세트) , file(파일첨부 양식) , number , color 있다.
★name : 데이터를 제출하기 위한 이름 지정
★value : input 의 값 지정 . 초기값이 있을 때 등 사용 참고 추후 React, Vue 에서는 state 값 등 변수처럼 지정 가능
★placeholder : 값이 입력되기 전 사용자에게 힌트 제공
required, disabled, checked 등
3. button
버튼을 만들 수 있는 태그는 크게 두가지
<input type=”button” value=”Click >: 일반 텍스트만 표현 가능
<button>Click me! : 어떤 요소든 하위에 포함 가능
<button> 태그의 장점은 CSS 로 버튼을 다양하게 스타일링하여 활용할 수 있다는 것
< 태그의 주요 속성 (
button type= " "
submit(default) : 서버로 form 데이터를 제출
reset : 모든 폼을 기본 값으로 바꾼다
button : 순수하게 클릭 이벤트를 받으며 , 별도로 함수를 연결시켜주지 않으면 아무것도 하지 않음
Javascript(React, Vue) 를 통해 이벤트를 연결시켜서 유용하게 사용할 수 있다
name : 데이터를 제출하기 위한 이름 지정
value : 초기값
disablled
4. label
인풋은 항상 label과 함께 쓰는 것이 좋다
label은 해당 Input 이 어떤 입력인지 설명해주는 역할을 한다
접근성을 위해서도 좋다
checkbox 나 radio 타입에서는 거의 필수이다
사용법 :
<div>
<label for="pw">PW :</label>
<input type="password" id="pw" name="password" placeholder="비밀번호를 입력하세요">
</div>
<div>
<label for="eamil">Email :</label>
<input type="email" id="email" name="useremail" placeholder="Email을 입력하세요">
</div>
인풋의 id 속성 값 -라벨 의 for 속성 값을 매핑시킨다
label for name 이름 label
input type text "id name"
또 다른 방법
label Click me input type text label
참고 ) label 안에 컨텐츠를 나타내는 텍스트 외에 다른 요소를 넣는것은 권장하지 않음 예 h1~6, p, a 등
5. checkbox
속성 (attribute)
name : form 제출 시 표시되는 이름 . 전달할 값의 이름
value : 전달할 값 . 체크박스의 값을 나타내는 문자열
- 사용자에게 노출되지 않으나 , form 데이터를 받은 곳 (action 에 명시한 곳 or 이벤트 핸들링 함수 에서 데이터를 받아서 처리할 때 name 과 함께 사용
- checkbox 에서는 value 가 명시되지 않으면 , default value 는 “ 으로 전송된다
id : <label> 의 for속성과 연결
checked : default로 체크되어있는지 여부
참고 ) 서버에 제출되는 형태 예시★
name 이 같은 입력이 있는 경우 : 주소]?location= menu=steak&menu=pasta &stars=great
★★name 이 모두 다른 경우 : 주소]?location=in&eatSteak=true&eatPasta=true&stars=great
<h3>어떤 메뉴를 주문하셨나요?</h3>
<input type="checkbox" id="steak" name="menu" value="steak">
<label for="steak">스테이크</label>
<input type="checkbox" id="pasta" name="menu" value="pasta">
<label for="pasta">파스타</label>
<input type="checkbox" id="risotto" name="menu" value="risotto">
<label for="risotto">리조또</label>
<input type="checkbox" id="salad" name="menu" value="salad">
<label for="salad">샐러드</label>
<!-- name을 다르게 제출 -->
<h3>어떤 음료를 드셨나요?</h3>
<input type="checkbox" id="sprite" name="sprite" value="true">
<label for="sprite">스프라이트</label>
<input type="checkbox" id="coke" name="coke" value="true">
<label for="coke">콜라</label>★★submit하고 url주소에 값이 잘 전달 됐는지 확인
6. radio
그룹 내 다수의 선택지 중 하나의 선택 을 입력 받고자 할 때 사용
<input type="radio">
속성 (Attribute) 작성 방법
name : form 제출 시 표시되는 이름 . 전달할 값의 이름 . 한 그룹은 반드시 같은 name 으로 지정해줘야 함
★★name 을 다르게 주면 , 별도의 그룹으로 인식된다
★★하나만 선택되어야 하는 상황에서 여러개가 선택되는 버그 오동작 이 발생할 수 있음 주의
value : 전달할 값 . 선택된 값을 나타내는 문자열 (name=value 형태로 제출
사용자에게 노출되지 않으나 , form 데이터를 받은 곳 (action 에 명시한 곳 or 이벤트 핸들링 함수 에서 데이터를 받아서 처리할 때 name 과 함께 사용
한 그룹 동일 name) 내에서 unique 한 즉 , 서로 다른 ) value 를 가져야 함
radio 에서 value 가 명시되지 않으면 , default value 는 “ 으로 전송된다 유의미한 radio 가 되기 위해 반드시 value 를 적어줘야 함
id : <label> 의 for 속성과 연결
<h3>어디에서 식사하셨나요?</h3>
<input type="radio" id="inside" name="location" value="in" checked>미리 체크
<label for="inside">매장 내 식사</label>
<input type="radio" id="takeout" name="location" value="out">
<label for="takeout">포장</label>
★★submit하고 url주소에 값이 잘 전달 됐는지 확인
7. select box > 선택바
드롭 다운 리스트를 생성하여 사용자가 하나를 선택할 수 있도록 함
작성 방법
1.<select> 태그로 감싼다
name 필수 ) : 전달할 값의 이름
id : <label> 의 for 속성과 연결
form : <form> 의 id 속성과 연결 (< 가 <form> 하위에 속하지 않을 때를 위해
그 하위에 <option> 으로 선택지를 하나씩 추가한다
value : 해당 선택지의 값을 나타내는 문자열 . 전달할 값
selected : 해당 option 이 초기에 선택되어 있도록 지정
<h3>음식 맛은 어떠셨나요?</h3>
<select name="stars">
<option value="bad">1</option>
<option value="soso">2</option>
<option value="okay">3</option>
<option value="good">4</option>
<option value="great" selected>5</option> 기본값
</select>
★★submit하고 url주소에 값이 잘 전달 됐는지 확인
느낀점 : 이번주는 가장 기본적인 html을 하는 중요한 주가 될것같다. 앞으로 자주 상기하면서 익숙해 져야지
