멋사 프론트엔드 스쿨 TIL(04.04)
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저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)