TIL 03 | HTML form & input

Saemsol Yoo·2020년 12월 7일
0

html / css

목록 보기
3/12
post-thumbnail

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" >

한 줄짜리 텍스트를 입력할 수 있는 필드이다.


email

<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=" "

🏷 labelinput 요소들과 연결해서 사용하는 태그이다. input의 이름을 달아주어 사용성을 개선해준다. 뿐만아니라 이것도 스크린리더기를 통해 읽혀서 접근성을 높여준다.
🖱 그리고 label클릭하면 연결된 input 요소가 자동으로 활성화 되어 편리함을 준다.

사용방법 1

input 요소에 id값을 넣어주고, 같은 id를 labelfor 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

select,option practice

<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>
profile
Becoming a front-end developer 🌱

0개의 댓글