폼요소

폼요소

유형
실습문서
주제

웹개발첫걸음

순번
7
태그
설명

날짜

06. 폼요소

👁️‍🗨️
🔗정보를 제출하기 위한 대화형 문서영역
태그
설명
속성(특성)
form
입력양식 태그
action: data 를 전송할 서버주소 method: data 전송방법(get, post)
fieldset
form 요소를 그룹핑
legend
fieldset의 제목
image
ex1-24.html

07. input , type

👁️‍🗨️
👉
value="데이터값" name="백단용 데이터 식별자" id="디자인용 식별자" → 유일값
💡
type=”radio” ⇒ 여러개 중에 하나 (택일)

type=”chackbox” ⇒ 복수선택

image
ex1-25.html

08. textarea,select

image
1-26.html

09. label

👁️‍🗨️
사용자 인터페이스항목의 설명
  • 인풋요소 의 범위지정
    • 범위지정방법
      • 태그를 감싸기
      • for , id 로 연결시키기
  • 접근성기술
tabindex
image
ex1-27.html

10. 폼정리

👁️‍🗨️
🔗MDN 링크

https://caniuse.com/

브라우저 호환성 확인
placeholder
입력힌트
required
필수입력
autocomplete
자동완성
on,off
pattern
disabled
비활성화
readonly
읽기전용
input:text 에만 적용가능 사용자가 value 변경불가
image
ex1-29.html

11. 과제

사용이미지

image
image

😋 문제1

텍스트

한방 샴푸 레시피
레시피 재료
재료	첨가량	48시간	대체재료
수상층	로즈마리 추출물	30g	증류수
네틀추출물	30g
증류수	90g
폴리쿼터	1.5g	쟁탄검
글리세린	10g	히아루론산 10g6
계면
활성제	LES/ CDE	180g / 10g	CDE + LES
코코베타인	5g	X
애플 계면 활정제	10g	올리브 계면 활성제
좋은 향을 위해서면 엘라스틴향 사용 추천
image

😋 문제2

member login 타이틀은 빼고 하세용
member login 타이틀은 빼고 하세용

😋 문제3 테이블로 이력서 만들어오기

<style>
    table,
    th,
    td {
      border: 1px solid;
    }
  </style>
image
image
이거하지마

😅추가문제 1

<input type=”chekbox”
<input type=”chekbox” checked />

😅추가문제 2

image