[HTML] form태그

FE/HTML,CSS

[HTML] form태그

mandelina 2022. 4. 5. 03:04

🚀 Form태그

- 이전글에서 간단한 form의 동작원리를 보았다면 이 글에선 태그를 살펴보자.

🥲 <form>의 속성

- action : 입력 값을 전송할 페이지

- method : 폼의 데이터를 전송할 방법 , get과 post가 있다.

🥲 get vs post?

	get	post
데이터가 어디실리는가	http 헤더에 데이터가 드러난다.	http 바디에 데이터를 실어 보내기 때문에 데이터가 외적으로 드러나지 않는다.
데이터의 양	서버에 자원을 위한 키워드를 보내거나 경로와 관련된 정보를 전송한다.	서버에서 작업하는데 필요한 데이터를 보내줘야한다.
멱등성	보장 (자원의 요청이므로 서버에 영향을 받지 않는다.)	보장X (데이터를 서버에 전송해서 특정 작업을 처리하는것이기 때문에 결과가 요청마다 달라질수 있다.)

🥲 input : 사용자에게 정보 입력을 받는다.

input의 속성

type, name, readonly, minlength,maxlength , required , autofocus , placeholder ,pattern이 있다.

- input 타입

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>form</title>
    </head>
    <body>
        <input type="text"><br>
        <input type="password"><br>
        <input type="date"><br>
        <input type="time"><br>
        <input type="range"><br>
        <input type="color"><br>
        <input type="radio"><br>
        <input type="checkbox"><br>
        <input type="file"><br>
        <textarea name="name" rows="8" cols="80"></textarea>
    </body>
</html>

* 써보면서 느껴보세요!

form

🥲 button

- button type

- submit : 기본값 , 서버로 양식 데이터를 제출

- reset : form의 모든값을 초기화

Q . 왜 type을 지정해줘야할까?

어차피 같은 input태그 안에 글이 써지는건 마찬가지인데 왜 type을 지정해주어야 할까?

바로 "사용자가 올바른 형식의 데이터를 입력하기 위함" 이다.

만약 email 데이터를 받는데 @가 없으면 데이터 형식이 잘못된것이기 때문이다!!

Q. input과 button 중 무엇을 사용해야할까?

button요소는 input보다 스타일을 적용하기 수월하다.

(input 태그는 닫는태그가 없어 value 값밖에 지정할 수 없다.)

더해서 가상요소를 사용하는것도 가능하기에 더 멋진 스타일을 사용해야한다면 <button>요소를 우선적으로 고려해보는것이 좋다.

🥲 label : input태그를 설명한다.

사용법 1 ) 텍스트 설명과 폼 입력 모두 포함

<label>
	이름 :
	<input type="text" name="name">
</label>

사용법 2 ) 폼 입력을 분리하여 for 속성을 이용해 레이블 지정

<label for="myName">이름 : </label>
<input type="text" name="name" id="myName">

🥲 select : 드롭다운 리스트박스 생성

<form action="">
  <label for="myDevice">현재 사용하고 있는 스마트폰의 제조사를 선택해주세요</label>
  <select name="device" id="myDevice">
    <option value="iphone">아이폰</option>
    <option value="galaxy">갤럭시폰</option>
    <option value="ㅜㅜ">LG폰</option>
  </select>
</form>

- selection 속성

mutiple : 여러개 option 선택할수 있도록 해줌

size : option개수 조절

- option 속성

value : 서버에 전송할 값

selected : 페이지가 로딩되고 난 후 기본적으로 선택되는 옵션

🥲 fieldset : 폼 컨트롤들을 그룹화

- 폼내용이 방대하여 섹션별로 나눌 필요성이 있을경우 사용한다. (문제별로 나눠도 되고, 전체문제로 묶어도 된다!)

<!-- 브라우저에서 어떻게 표현되는지 확인해보세요 -->
<form action="">
  <fieldset>
    <legend>개인정보</legend>
    <label for="myName">이름</label>
    <input type="text" name="name" id="myName">
    <label for="myTel">전화번호</label>
    <input type="tel" name="tel" id="myTel">
    <label for="myEmail">이메일</label>
    <input type="email" name="email" id="myEmail">
  </fieldset>
  <fieldset>
    <legend>개인정보 제공 동의</legend>
    <label for="checkAgree">개인정보 제공에 동의하십니까?</label>
    <input type="checkbox" name="agree" id="checkAgree">
  </fieldset>
</form>

- legend : fieldset 태그 바로 뒤에 위치하며, 폼 그룹 목적을 나타내는 제목을 의미한다.

🥲 <textarea> : 여러줄의 text를 입력받음

cols : textarea가 보여줄 입력창의 넓이 / 기본값 : 20

rows : textarea 입력 창이 기본적으로 보여주는 줄 수

<textarea name="" id="" cols="40" rows="10" maxlength="10" minlength="5"></textarea>

🥲 <datalist> : select와 input을 섞어서 사용할 수 있음

- input의 list속성과 datalist요소의 id속성을 연결하여 사용한다.

- 기본적으로 선택할 수 있는 옵션과 만약 선택하고 싶은 값이 없으면 사용자가 원하는 임의의 값을 입력 받을 수 있도록 제공

<label for="solasystem">원하는 행성을 선택하세요 : </label>
<input type="text" id="solasystem" list="planets" name="planets">
<datalist id="planets">
    <option value="수성">수성</option>
    <option value="금성">금성</option>
    <option value="지구">지구</option>
    <option value="화성">화성</option>
</datalist>

원하는 행성을 선택하세요 :

🌈그밖에

- 코드 작성시 class 명을 확실히 하자

- SEO (검색엔진최적화)

- p태그 스크롤로 만드는 법 : overflow : scroll

🔥 회고

오전시간은 메이커준님과 회고시간을 가졌다. 회고를 하며 내가 가진 불안,걱정 역시 다른분들도 같은것을 느꼈다. 4개월간 조급해하지 않고 하루하루 의미있게 보내면 4개월이 지난 후 성장된 나의 모습을 볼 수 있을거라 기대한다.

오후시간은 삼성,네이버,동물의숲 웹페이지 틀을 나누어 보고 html form태그들을 배웠다.

html태그들을 배우면서 느끼는 점은 '내가 html태그에 이리 상세하게 관심을 가진적이 있던가?' 였다. 전에는 단순히 한번 쳐보고 끝냈다면, 지금은 멋사 2기분들과 함께 동작원리 및 웹접근성,웹표준등에 대해 관심을 가지며 코딩을 하는 내 모습에 뿌듯했다.

무엇보다 중요한건, 항상 코딩할때 왜 이 코드를 작성했을까에 대한 이유를 찾으며 코딩하기!!

'FE > HTML,CSS' 카테고리의 다른 글

[css] reset css \| Vendor-Prefix \| Selector우선순위 (4)	2022.04.06
[HTML] table \| inline vs block (0)	2022.04.05
[HTML] Text-level semantics (0)	2022.03.30
[HTML] Grouping Content \| HTML Living Standard (0)	2022.03.29
[HTML] HTML태그 (0)	2022.03.28

현재글[HTML] form태그

Hello_coding

node.js, 자바스크립트, HTML, http, 코딩테스트, 프로그래머스, TypeScript, react, 프론트엔드스쿨2기, 프론트엔드스쿨, 프론트엔드, spa, TpyeScript, JS, useEffect, 멋쟁이사자처럼, CSS, 리덕스툴킷, 리액트, 리덕스,

Today :
Yesterday :

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Hello_coding

[HTML] form태그

🚀 Form태그

🥲 <form>의 속성

- action : 입력 값을 전송할 페이지

- method : 폼의 데이터를 전송할 방법 , get과 post가 있다.

🥲 get vs post?

get

post

🥲 input : 사용자에게 정보 입력을 받는다.

input의 속성

- input 타입

🥲 button

- button type

Q . 왜 type을 지정해줘야할까?

Q. input과 button 중 무엇을 사용해야할까?

🥲 label : input태그를 설명한다.

🥲 select : 드롭다운 리스트박스 생성

- selection 속성

- option 속성

🥲 fieldset : 폼 컨트롤들을 그룹화

- legend : fieldset 태그 바로 뒤에 위치하며, 폼 그룹 목적을 나타내는 제목을 의미한다.

🥲 <textarea> : 여러줄의 text를 입력받음

cols : textarea가 보여줄 입력창의 넓이 / 기본값 : 20

rows : textarea 입력 창이 기본적으로 보여주는 줄 수

🥲 <datalist> : select와 input을 섞어서 사용할 수 있음

🌈그밖에

🔥 회고

'FE > HTML,CSS' 카테고리의 다른 글

'FE/HTML,CSS'의 다른글

티스토리툴바

[HTML] form태그

🚀 Form태그

🥲 <form>의 속성

- action : 입력 값을 전송할 페이지

- method : 폼의 데이터를 전송할 방법 , get과 post가 있다.

🥲 get vs post?

get

post

🥲 input : 사용자에게 정보 입력을 받는다.

input의 속성

- input 타입

🥲 button

- button type

Q . 왜 type을 지정해줘야할까?

Q. input과 button 중 무엇을 사용해야할까?

🥲 label : input태그를 설명한다.

🥲 select : 드롭다운 리스트박스 생성

- selection 속성

- option 속성

🥲 fieldset : 폼 컨트롤들을 그룹화

- legend : fieldset 태그 바로 뒤에 위치하며, 폼 그룹 목적을 나타내는 제목을 의미한다.

🥲 <textarea> : 여러줄의 text를 입력받음

cols : textarea가 보여줄 입력창의 넓이 / 기본값 : 20

rows : textarea 입력 창이 기본적으로 보여주는 줄 수

🥲 <datalist> : select와 input을 섞어서 사용할 수 있음

🌈그밖에

🔥 회고

'FE > HTML,CSS' 카테고리의 다른 글

'FE/HTML,CSS'의 다른글

관련글

티스토리툴바