2022-10-25 [새싹 프론트엔드] form 태그 , button&form 차이점

강의 내용

폼 태그
폼 꾸미기

폼 요소란?

<input>, <textarea >, <select> 등등....

사용자가 입력하거나 입력을 받는 걸 모두 폼이라고 부른다

input을 사용할때는 무조건 상황에 맞는 type을 사용해야한다.

input의 유형

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input#%3Cinput%3E_%EC%9C%A0%ED%98%95

input의 속성

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input#%EC%86%8D%EC%84%B1

form작성

label과 input은 짝꿍이다

<form action="./01-result.html" method="get">

    <label for="name">이름</label>
    <input id="name" name="my-name" type="text">

    <br><br>

    <label for="age">나이</label>
    <input id="age" name="my-age" type="number">

    <br><br>

    <button type="submit">제출</button>
    <button type="reset">초기화</button>
  </form>

form안엔 네모칸 안에 <입력>할 수 있는 요소와 <버튼>들이 들어간다.
h(n) p태그와 같은 다른 태그도 들어갈 수 있다.
<labal for="">속성과 <input id="">속성값은 같아야한다.이유→ https://youtu.be/TrC2x4N0XqY?t=6498

태그	설명	비고
<form>	정보를 제출하기 위한 태그들을 포함	autocomplete 속성: 자동완성 여부 (기본: on) 검색기록같은 느낌
<input>	입력을 받는 요소	type 속성을 통해 다양화
<label>	인풋 요소마다의 라벨	for 속성값을 인풋 요소의 id와 연결. 인풋의 클릭 영역 확장
<button>	버튼	type 속성에 submit(제출), reset(초기화), button(기본 동작 없음)

폼 안의 요소들 그룹으로 묶기

  <form action="">
      <fieldset>
        <legend>반장</legend>
        <label for="name">이름</label>
        <input id="name" type="text">
        <br>
        <br>
        <label for="age">나이</label>
        <input id="age" type="text">
      </fieldset>
    <br>
    <br>
    <fieldset>
      <legend>부반장</legend>
      <label for="">이름</label>
      <input type="text">
      <br>
      <br>
      <label for="">나이</label>
      <input type="text">
    </fieldset>
    <fieldset disabled>
      <legend>서기</legend>
        <label for="">이름</label>
        <input type="text">
        <br>
        <br>
        <label for="">나이</label>
        <input type="text">
    </fieldset>
  </form>

태그	설명	비고
<fieldset>	폼 태그 내 입력요소와 라벨들을 그룹화 css를 이용하여 범위 <border>를 지울수 있고 <fieldset>의 모든 콘텐츠를 한 번에 비활성화할 수 있다.	<disabled>(장애를가진) 속성: 지정한 경우, 모든 자손 컨트롤을 비활성화합니다. 비활성 컨트롤은 편집할 수 없다. <enabled> 반댓말 <legend> 안의 양식 요소는 비활성 상태로 전환되지 않습니다.
<legend>	필드셋 요소의 제목 또는 설명

텍스트(text) 관련 인풋 속성들<input> 안에 작성

  <form action="">
    <label for="name_text">text</label><br>
    <input id="name_text" type="text" text="" placeholder="5자 이하" maxlength="5">
    <br><br>

    <label for="name_password">password</label><br>
    <input id="name_password" type="password" placeholder="4자 이상" minlangth="4">
    <br><br>

    <label for="name_search">search</label><br>
    <input id="name_search" type="search">
    <br><br>

    <label for="name_tel">tel</label><br>
    <input id="name_tel" type="tel" for="tel">
  </form>

text관련 input의 속성들

속성	설명	비고
place-holder 장소-잠금	빈 칸에 보이는 안내문
maxlength	최대 길이
minlength	최소 길이	위반시 <submit>(제출하다)이 거부됨

text input 속성 더보기

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input#%EC%86%8D%EC%84%B1

<input>의 다양한 <type>타입

태그	설명	비고
<input type="text">	기본값	아이디나 주소등을 입력할 때 사용
<input type="password">	비밀번호	비밀번호 입력시 사용
<input type="search">	검색기능	-모바일에선 이렇게 나온다. -텍스트 모두 삭제기능 탑제 https://youtu.be/TrC2x4N0XqY?t=6979
<input type="tel">	전화번호	모바일에서 봤을때 키패드와 함께 뜬다.

<input type=""> 더 보기

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input#%3Cinput%3E_%EC%9C%A0%ED%98%95

숫자(number)관련 인풋 타입(type)

    <fieldset>
      <legend>숫자 관련 input type</legend>
      <br>
      <label for="name_number">number</label>
      <br>
      <input id="name-number"type="number" min="0" max="10">
      <br><br>
      <label for="range">range</label>
      <br>
      <input id="name-range"type="range" min="0" max="100" step="20">
      <br><br>
      <label for="name_week">date</label>
      <br>
      <input id="date" type="date" min="2020-01-01" max="2022-07-11">
    </fieldset>

속성	설명	비고
<input type="number">
<input type="range"> 범위	접속사 min 와 max 사이에 사용되며 수용가능한 값의 범위를 정의합니다.
<input type="date"> 정보	날짜(연월일, 시간 없음)를 지정할 수 있는 컨트롤.

숫자(number) 관련 인풋 속성들

속성	설명	비고
min	최소값	date 등 타입마다 형식 다름
max	최대값	date 등 타입마다 형식 다름
step	간격
min,max의 형식보기		https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local

시간·날짜 관련 다른 타입들 👉 datetime-local, month, time, week...

체크(check) 관련 인풋 타입(type)

 <fieldset>
      <legend>체크 관련 인풋 타입</legend>
      <h2>checkbox</h2>
      <input id="name_checkbox" type="checkbox" > 
    	★checkde=기본으로 체크되어 보여질 값
      <label for="name_checkbox">유기농</label>
      <h2>radio</h2>
        ★name 그룹화 (그룹중 하나만 선택됨)
        ★value 유저가 보는 값이 아닌 시스템이 보내지는 값
      <input type="radio" id="name_apple" name="f_fruit" value="apple">
      <label for="name_apple">사과</label>
      <input type="radio" id="name_grape" name="f_fruit" value="grape">
      <label for="name_grape">포도</label>
      <input type="radio" id="name_orange" name="f_fruit" value="orange">
      <label for="name_orange">오렌지</label>
      <input type="radio" id="name_carrot" name="v_fruit" value="carrot">
      <label for="name_carrot">당근</label>
      <input type="radio" id="name_tomato" name="v_fruit" value="tomato">
      <label for="name_tomato">토마토</label>
      <input type="radio" id="name_eggplant" name="v_fruit" value="eggplant">
      <label for="name_eggplant">가지</label>
    </fieldset>

결과값

속성	타입	설명
checked	체크박스 & 라디오	체크된 상태로 창을 여는지 여부
name	라디오에선 이렇게 사용 → (다른 type들에서도 사용)	그룹내에 하나만 선택됨
value	라디오에선 이렇게 사용 → (다른 type들에서도 사용)	각 옵션마다 유저가 보는 값이 아닌 시스템으로 보내지는 값

기타 인풋 타입

파일 (file) 관련 인풋

    <fieldset>
      <legend>기타 인풋 타입</legend>
      <label for="file">file</label>
      <br>
      <!-- accept(받아들이다) 허용가능한 파일명 -->
      <!-- multiple(다중의)  파일이 다중 선택됨-->
      <input type="file" accept="image/png, image/jpeg" multiple>
      <br>
      <label for="hidden">hidden</label>
      <input id="hidden" type="hidden">
      <br>
      <hr>
      <!-- email 타입은 정교하지않다 @ 어쩌고 만 써도 정상적으로 제출이 되기때문에 
            자바스크립 등으로 섬세한 지정이 필요하다-->
      <label for="email"></label>
      <input id="email" type="email">
      <button type="submit">제출</button>
    </fieldset>
  </form>

파일 인풋 속성들

속성	설명	참조
accept	받아들일 수 있는 파일 형식	작성형식 https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input/file#%EA%B3%A0%EC%9C%A0_%ED%8C%8C%EC%9D%BC_%EC%9C%A0%ED%98%95_%EC%A7%80%EC%A0%95%EC%9E%90
multiple	다중 파일 업로드 가능 여부

공통설명

특성: type의 속성
유형: 사용할수 있는 type의 유형

인풋 요소 공통 (대부분의) 속성

    <fieldset>
      <legend>인풋 요소 공통 (대부분의) 속성</legend>
      <label for="value">value 미리 지정된 값</label>  <br>
      <input id="value" type="text" value="지정됨">  <br> <br>
      <label for="autofocus">autofocus 자동포커스</label> <br>
      <input id="autofocus" type="text" autofocus="autofocus"> <br> <br>
      <label for="required">required 필수입력</label> <br>
      <input id="required" type="text" required placeholder="필수입력!" > <br><br>
      <label for="readonly" >readonly 수정불가 유저가 읽기만 가능,전송은됨</label> <br>
      <input id="readonly" type="text" readonly placeholder="입력불가상태 전송은됨"> <br> <br>
      <label for="desabled">desabled 장애 입력불가 전송안됨 </label> <br>
      <input id="disabled" type="text" disabled="disabled" placeholder="입력불가상태 전송안됨"> <br> <br>
      <label for="apple">사과</label>
      <input type="radio">
      <label for="orange">오렌지(품절)</label>
      <input type="radio" disabled>
      <button type="submit">제출</button>
    </fieldset>

결과값

속성	설명	참조
value (값)	보이는 칸의 미리 입력될 값 수정가능 <placeholder>는 안내문 느낌 <value>는 진짜 미리입력이 된 값
autofocus (자동포커스)	페이지가 켜졌을때 해당창에 바로 포커스 맞춰짐(새로고침시에도 포커스 고정)
required (필수의)	필수입력칸
readonly (읽기전용의)	유저가 수정할 순 없지만 값이 전송된다
desabled (장애를 가진)	입력불가 창 값 전송도 안된다.

<input>과<button>은 공통점이 많다

type속성에 들어가는 reset,submit,button속성을 <input>과 <button>전부 가질 수 있다.

그럼 왜 두개의 태그로 나눴을까? <button>은 <input>이 생긴 후 나중에 추가된 값이라고 한다.

그래서 css스타일을 지정할때 <button>태그가 더 쉽게 스타일을 추가 할 수 있다.

두 태그의 차이점에 대해 알아보았다.

가장 큰 차이점음 <input> 에는 닫는 태그가 없으므로 <button>에 비해서 디자인에 제약이 있다.

태그자체가 자식요소를 포함 할 수 있기 때문에 특히 img를 넣어야할때, 복잡한 css를 넣어야할때 유용하게 쓰인다

하위요소를 넣는게 가능하기 때문에 <span> 태그를 넣어 텍스트 특정 부분에 css도 넣어줄 수 있다.

css
/*그와 달리 input은 css까지 넘어가야 img를 넣을 수 있다.*/
    input[type=button]{
      background-image: url(./codingworks/flex/fdsf.jpg);
    }
    
    
  <input type="button" value="안녕하세요">
  
  /*단 한줄로 끝난 button태그*/
  <button>
    <img src="./codingworks/flex/asda.jpg" alt="">
  </button>

참고

<button>태그에는 기본속성인 sudmit 이있다.

type이 정해지지않을 시 sudmit을 수행한다.

알맞는 type을 지정해주자.

새싹 DT 기업연계형 프론트엔드 실무 프로젝트 2주차 블로그 포스팅

'HTML' 카테고리의 다른 글

2022-10-17 [새싹 프론트엔드] 강의정리 (0)	2022.10.18

공부중

2022-10-25 [새싹 프론트엔드] form 태그 , button&form 차이점

강의 내용

form작성

폼 안의 요소들 그룹으로 묶기

텍스트(text) 관련 인풋 속성들<input> 안에 작성

text관련 input의 속성들

<input>의 다양한 <type>타입

숫자(number)관련 인풋 타입(type)

숫자(number) 관련 인풋 속성들

시간·날짜 관련 다른 타입들 👉 datetime-local, month, time, week...

체크(check) 관련 인풋 타입(type)

결과값

기타 인풋 타입

공통설명

<input>과<button>은 공통점이 많다

'HTML' 카테고리의 다른 글

티스토리툴바

2022-10-25 [새싹 프론트엔드] form 태그 , button&form 차이점

강의 내용

form작성

폼 안의 요소들 그룹으로 묶기

텍스트(text) 관련 인풋 속성들<input> 안에 작성

text관련 input의 속성들

<input>의 다양한 <type>타입

숫자(number)관련 인풋 타입(type)

숫자(number) 관련 인풋 속성들

시간·날짜 관련 다른 타입들 👉 datetime-local, month, time, week...

체크(check) 관련 인풋 타입(type)

결과값

기타 인풋 타입

공통설명

<input>과<button>은 공통점이 많다

'HTML' 카테고리의 다른 글

'HTML' Related Articles

티스토리툴바