HTML

form

<form>은 정보를 입력하는 영역입니다.
<form action="" method="">

form의 속성
- action : 입력 값을 전송할 페이지를 나타냅니다.
- method : 폼의 데이터를 전송할 방법을 정의합니다.
  method 속성에는 get과 post가 있습니다.
  - get : 웹 서버에 데이터를 요청할 때 사용
  - post : 파일을 올리거나 보안이 필여한 데이터를 전송할 때 사용

input

<input>은 사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어 주고, 사용자에게 정보를 입력을 받습니다.

input의 속성
- type : 태그 모양을 다양하게 변경할 수 있습니다. text, radio, checkbox, password, button 등을 지정할 수 있습니다.
- name : 태그 이름을 지정합니다.
- readonly : 태그를 읽기 전용으로 합니다. textarea일 경우 편집되지 않게 만드는 것입니다.
- placeholder : 입력할 값에 대한 힌트를 줍니다.
- required : 태그에 값을 입력하지 않고, submit버튼을 누르면 에러가 떠 데이터가 전송되지 않습니다.
  ...
input 타입
- text : text 입력
- button : 간단한 버튼 만들어 줌
- password : 마스크 처리 된 text
- date : 날짜 입력
- time : 시간 입력
- file : 파일 업로드
- email : 이메일 주소 입력
- number : 숫자 입력
  ...

<!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="button"><br>
        <input type="email"><br>
        <input type="radio"><br>
        <input type="checkbox"><br>
        <input type="file"><br>
    </body>
</html>

label

label은 사용자 인터페이스 항목의 설명을 나타냅니다. input태그를 설명하는 텍스트를 옆에 붙여 무엇을 입력해야 하는지 설명합니다.

사용법

텍스트의 설명과 폼 입력 모두를 포함하는 방식

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

폼 입력에서 분리하여 for속성을 이용해 레이블을 지정하는 방식

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

select

select요소는 드롭다운 리스트 박스를 생성합니다. 이때 사용자가 선택해야하는 리스트 박스 안의 아이템을 만들 때에 option태그를 사용합니다.

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

select 속성
- mulitple : multiple 속성을 사용하면 사용자가 여러 개의 options요소를 선택할 수 있게 됩니다.
- size : 드롭다운 리스트에서 한번에 보여줄 수 있는 option의 갯수를 조절할 수 있습니다.
option 속성
- value : 선택 값에 따라 서버에 어떤 값을 전송할 지 설정할 수 있습니다.
- selected : 페이지가 로딩되고 난 뒤 기본으로 선택되는 옵션을 나타내는데 사용합니다.

fieldset

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

<legend> 요소는 <fieldset> 태그 바로 뒤에 위치하며 폼 그룹의 목적을 나타내는 제목을 의미합니다. 반드시 <fieldset>의 첫번째 자식으로 사용해야합니다.

button

button태그는 클릭 가능한 버튼을 나타냅니다. 버튼의 모습을 다양하게 제어하고 버튼 내부에 다른 자식 요소를 추가하고 싶을 때 사용합니다.

type
- submit : 버튼이 서버로 양식 데이터를 제출합니다. 지정하지 않은 경우 기본값입니다.
- reset : form 의 모든 값을 초기화시킵니다.
- button : 클릭 가능한 버튼입니다.

<!-- 네이버 메인 화면의 검색 버튼 html 구조 -->

<button id="search_btn" type="submit" title="검색">
	<span class="blind">검색</span>
	<span class="ico_search_submit"></span>
</button>

textarea

textarea는 여러 줄의 text를 입력받을 수 있습니다.

속성
- cols : 입력창의 넓이 입니다. 문자의 평준적인 넓이를 기준으로 합니다.
- row : textarea 입력 창이 기본적으로 보여줄 입력 줄 수를 의미합니다.

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

datalist

datalist태그는 input요소에서 사용하기 위한 옵션들의 리스트를 정의할 때 사용합니다.

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

과제

google-form 클론 !!
https://leeyeun.github.io/google-form/

Author And Source

이 문제에 관하여(멋사 프론트엔드 스쿨 TIL(04.04)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dpdms0109/멋사-프론트엔드-스쿨-TIL04.04

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

멋사 프론트엔드 스쿨 TIL(04.04)