Form
form action=" " method=" "
<form action=" " method=" " ></form>
form 태그는 유저로부터 input (정보나, 데이터 등) 을 받기 위한 태그이다.
🎄 Attribute 🎄
action : action="여기" 에 작성해줘야 하는 것은 주소이다. 유저에게 받은 input값들을 보내서 처리해줄 서버쪽 URL을 적어준다.
method : method="여기" 에는 GET 이나 POST 를 적어준다.
-
GET → 안전하지 않다. username이나 password를 GET으로 전송하면 절대 안된다! GET으로 전송하는 내용들은 URL에 추가되어 그대로 보여진다. 그리고 256byte~4096byte까지의 데이터만 서버로 넘길 수 있다.
-
POST → 대부분 이 방식을 사용한다. 큰 용량의 정보도 서버로 보낼 수 있다. 중요한정보들은 POST로 전송한다!
name : name=" " 한 문서 안에 여러개의 form 이 있을 때, 각 폼들을 구분하기 위해 사용한다.
autocomplete : autocomplete="off" 자동완성을 해제 시킨다.
input
input
<input type=" " ></input>
input 태그는 유저에게 값을 받을 필드를 생성해주는 태그이다.
🚨 type attribute를 꼭 작성해주어야 하며, input에는 다양한 type들이 있다.
🎄 Attribute 🎄
placeholder : "아이디를 입력해주세요" 처럼 처음에 떠있는 글씨를 설정한다.
required : 꼭 채워야 하는 항목으로 만들어준다. 미입력시 폼 제출이 안된다.
value : 설정한 값이 처음부터 입력이 되어있도록 해준다.
🤔 vs placeholder? placeholder 은 입력을 하려고 활성화 시키면 사라져 버리는것이고, value 는 그 자체로 입력이 이미 되어있는 상태인거다.
disabled : 입력할 수 없게 막아두는 기능이다.
maxlength : 입력 가능한 최대 문자열의 수를 제한한다.
maxlength : 입력 해야 할 최소한의 문자열의 수를 설정한다.
max : 숫자를 입력할 때, 숫자의 크기의 최대값을 제한한다.
min : 숫자를 입력할 때, 숫자의 크기의 최소값을 제한한다.
input types
type="text" type="email" type="password" type="number" type="url" type="file" type="date" type="range" type="color" type="submit"
text
<input type="text" >
→ 한 줄짜리 텍스트를 입력할 수 있는 필드이다.
<input type="email" placeholder="이메일을 입력해주세요">
→ 이메일 주소를 입력할 수 있는 필드이다.
✨ 이메일주소 형식이 아니면 제출이 안된다.
<form action="#" post="GET">
<input type="email">
<input type="submit" value="Send">
</form>password
<input type="password" minlength="8" placeholder="비밀번호를 입력해주세요">
→ 비밀번호 를 입력할 수 있는 필드이다.
✨ 입력하면 숫자가 **** 처리되어 안보인다.
<form action="#" post="GET">
<input type="password" minlength="8" placeholder="비밀번호를 입력해주세요.">
<input type="submit" value="Send">
</form>number
<input type="number min="7" max="50" " >
→ 숫자 텍스트를 입력할 수 있는 필드이다.
url
<input type="url" >
→ url 주소를 입력할 수 있는 필드이다.
file
<input type="file" accept=".jpg, .png" >
→ 파일을 첨부 할 수 있는 버튼이 생긴다.
✨ accept attribute를 이용해서 파일의 형식을 제한할 수 있다.
date
<input type="date" >
→ 날짜(연,월,일)을 입력할 수 있는 필드이다.
range
<input type="range" min="0" max="10" step="1">
→ 숫자의 크기를 조절할 수 있는 슬라이드가 생긴다.
✨ step attribute를 이용해서 슬라이드 이동 정도를 제한 할 수 있다.
color
<input type="color" >
→ 색상을 선택할 수 있는 필드이다.
submit
<input type="submit" value="Send" >
→ 전송버튼이 생긴다.
radio
<input type="radio" name="color" value="green" >
<input type="radio" name="color" value="yellow" >
→ 1개만 선택 가능한 라디오 버튼이 생긴다.
green
yellow
🏷 radio input 만으로는 어떤 버튼인지 알 수 가 없다. 그래서 <label> 태그와 같이 써줘야 한다.
<input type="radio" name="color" value="green" id="green">
<label for="green">green</label>
<input type="radio" name="color" value="yellow" id="green">
<label for="green">yellow</label>🎄 Attribute 🎄
name : 라디오 버튼은 선택지 중 하나만 선택이 되어야 하는데, 어떤 버튼끼리 같은 항목인지 알 수 가 없기 때문에 버튼끼리 하나의 그룹으로 묶어주기 위해 서 입력해주어야 한다!!!
→ 같은 그룹끼리는 같은 값을 입력해준다.
value : 선택된 값을 서버에게 전달할 때 이 선택값의 이름이 뭔지 알려주기 위해서 입력해준다.
→ 각각 다 다르게 입력해줘야 한다.
🤚🏻 만약 이 라디오버튼이 있는 폼의 post 방식이 "GET" 이라면, 선택 값의 name과 value가 URL뒤에 생기는것을 볼 수 있다.
checkbox
<input type="checkbox" name="food" value="hamburger" >
<input type="checkbox" name="food" value="pizza" >
<input type="checkbox" name="food" value="chicken" >
→ 다중 선택이 가능한 체크박스가 생긴다.
hamburger
pizza
chicken
🏷 checkbox 만으로는 어떤 버튼인지 알 수 가 없다. 그래서 <label> 태그와 같이 써줘야 한다.
<input type="checkbox" name="food" value="hamburger" id="hamburger" >
<label for="hamburger">hamburger</label>
<input type="checkbox" name="food" value="pizza" id="pizza" >
<label for="pizza">pizza</label>
<input type="checkbox" name="food" value="chicken" id="chicken">
<label for="chicken">chicken</label>🎄 Attribute 🎄
👏🏻 radio 의 속성값과 같다 👏🏻
name : 하나의 그룹으로 묶어주기 위해 서 입력해주어야 한다!!!
→ 같은 그룹끼리는 같은 값을 입력해준다.
value : 선택된 값을 서버에게 전달할 때 이 선택값의 이름이 뭔지 알려주기 위해서 입력해준다.
→ 각각 다 다르게 입력해줘야 한다.
🤚🏻 만약 이 체크박스가 있는 폼의 post 방식이 "GET" 이라면, 선택 값의 name과 value가 URL뒤에 생기는것을 볼 수 있다.
label
label for=" " id=" "
🏷 label은 input 요소들과 연결해서 사용하는 태그이다. input의 이름을 달아주어 사용성을 개선해준다. 뿐만아니라 이것도 스크린리더기를 통해 읽혀서 접근성을 높여준다.
🖱 그리고 label을 클릭하면 연결된 input 요소가 자동으로 활성화 되어 편리함을 준다.
사용방법 1
input 요소에 id값을 넣어주고, 같은 id를 label 의 for attribute에 똑같이 입력해준다.
🤚🏻 label for에 id를 적어줄 때는 # 은 입력해주지 않는다.
<label for="input의 id" > 라벨이름 </label>
<input type="text" id="user-name">
ex
username
<label for="user-name">username</label>
<input type="text" id="user-name">사용방법 2
label 안에 input 을 중첩시켜서 사용한다.
🤚🏻 이때는 이 자체로 연결되었기 때문에 for 와 id속성이 필요없다 😊
<label> username
<input type="text" >
</label>
ex
username
<label>username <input type="text"> </label>
Select & Option
select option
✨ select로 옵션 메뉴 만들고, option으로 그 하위 옵션 목록중 각 항목을 만든다.
<form action="#" method="GET">
<label for="language" > language </label>
<select multiple name="language" id="language>
<option value="html"> HTML </option>
<option value="css"> CSS </option>
<option value="js"> JavaScript </option>
</select>
</label>
🎄 Attribute 🎄
name=" " : select 에 넣어주는 attribute인데, 폼이 작성되어 서버로 넘어갈 때 전달되는 데이터의 이름이다.
value=" " : option에 넣어주는 attribute 로, 서버로 넘어갈 때 선택된 값이 무엇인지를 알려주는 값이다. 지정하지 않은 경우, 요소의 텍스트 콘텐츠를 대신 사용한다.
multiple : 다중선택이 가능하게 하려면 select에 multiple 이라는 attribute를 추가해준다.
disabled : 지정한 경우 이 옵션을 선택할 수 없다.
selected : 지정한 경우 초기에 이 옵션이 선택된 상태로 설정된다. multiple 을 지정하지 않는 한, 하나의 option 요소에만 이 특성을 넣을 수 있다.
ex
<label for="pet-select">Choose a pet:</label>
<select name="pets" id="pet-select">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>Textarea
text
textarea 는 여러 줄의 text를 받을 때 사용한다.
(vs input type="text" : 는 한 줄의 짧은 텍스트를 받을 때 사용)
<textarea> </textarea>
💡이것도 label 태그로 라벨을 붙여줄 수 있다.
🎄 Attribute 🎄
cols="숫자" : 텍스트 창의 width를 정해준다. (한 줄의 글자수) ✨나중에 CSS로도 처리 가능하다.
rows="숫자" : 텍스트 창에서 한번에 보여지는 텍스트 라인의 수를 정해준다. ✨나중에 CSS로도 처리 가능하다.
name=" " : 해당 textrea의 이름이다.
placeholder=" " : input 태그에서 했던 것처럼 textarea에서도 유저가 해당 칸에 무엇을 입력해야 하는지 알려주는 내용을 써줄 수 있다.
ex
<label for="text">오늘의 일기 📒</label>
<textarea cols="60" rows="10" placeholder="Write something here" id="text"></textarea>Button
button
<button type=" "> 버튼에 써지는 이름 </button>
🎄 Attribute 🎄
type="button" : 그냥 버튼의 용도로 사용한다.
type="submit" : form 의 내용을 제출할 때 사용한다.
type="reset" : form 에서 입력한 내용을 리셋할 때 사용한다.
ex
<form action="#" method="GET" autocomplete="off">
<label for="name">NAME</label>
<input type="text" placeholder="이름을 입력해주세요" id="name" />
<label for="email">EMAIL</label>
<input type="email" placeholder="이메일을 입력해주세요" id="email" />
<div>
<button type="submit">submit</button>
<button type="reset">reset</button>
</div>
</form>