>폼(form)
- 웹 페이지에서 사용자로부터 입력을 받을 때 사용하는 태그
:사용자가 입력한 데이터를 서버로 전송할 때 form 요소를 사용
<form action="데이터를 보낼 목적지" method="데이터 전송 방식">
여러 입력들(input, textarea, select)
.....
</form>
>>method
post : body에 데이터를 저장하여 전송하는 방식
get : URL에 데이터를 저장하여 전송하는 방식
>>입력상자(input)
form 내부에서 데이터를 입력받기 위해 설정해주는 요소
<input type="입력형식(서식)">
[ type 속성 ]
text : 문자열을 입력받는 글상자
password: 비밀번호를 입력받는 글상자
radio: 여러개의 옵션 중에서 단 하나의 옵션만을 입력받을 수
있도록 하는 버튼, 그룹을 맺기 위해서 name 속성의 값이 동일해야한다.
checkbox: 여러개의 옵션 중에서 다수의 옵션을 입력받을 수 있도록 하는 버튼
file :원하는 파일을 서버로 전송하기 위한 버튼
email :이메일을 입력받는 글상자(@ 필요)
URL :웹사이트 주소를 입력받는 글상자(http부터 시작된 url)
tel :전화번호를 입력받는 글상자(핸드폰으로 볼 시 숫자 키패드 사용)
date :원하는 날짜를 입력받는 글상자
number :원하는 숫자를 입력받는 글상자
color :원하는 색상을 입력받는 요소,16진수 RGB컬러 값으로 전달
search :검색어를 입력받는 글상자(오른쪽 끝에 X버튼이 생겨남)
range :일정 범위안에 값만을 입력받는 조절바
buttion :이벤트가 없는 일반 버튼
reset :입력받은 데이터(속해있는 폼읭)를 초기화하는 버튼
submit :입력받은 데이터(속해있는 폼의)를 서버에 제출, 전송하는 버튼
form의 action 속성에 설정한 곳으로 데이터를 전송
>>선택상자
여러개의 옵션이 드롭다운 리스트로 되어 있으며 그 중에서 단 하나의 옵션만을
입력받을 수 있음. <option> 요소를 통해 선택할 수 있는 아이템을 설정한다.
<select name="전송할이름">
<option value="보낼값">보여질 내용1</option>
<option value="보낼값">보여질 내용2</option>
...
</select>
>>여러줄 글상자
-여러줄의 텍스트를 입력받는 글상자
<textarea cols="가로글자수" rows="새로글자수"></textarea>
>>데이터 목록
미리 지정된 옵션 목록을 보여주는 태그
datalist 요소 자체는 보이지 않지만, 다른 input에서 list를
설정 해주면 특정 글자를 입력할 시 해당되는 지정된 글자를
미리 보여줄 수 있다.
<input type="text" list="datalist의 id값">
<datalist id="id값">
<option label="보여질값" value="실제값"></option>
<option value="">보여질값</option>
...
</datalist>
>>그룹
폼 요소를 그룹으로 묶을 때 사용
<fieldset></fieldset>
>>그룹 제목
: fieldset 의 제목을 만들 때 사용
: fieldset 내부에 존재해야 함
<fieldset>
<legend>제목</legend>
</fieldset>
>>라벨
폼 양식에 이름을 붙이는 요소
label 요소를 이용해서 다른 요소와 연결을 해준다
radio 또는 checkbox의 스타일을 설정
<label>텍스트 <input></label>
>><input> 의 속성들
size : 크기를 설정하는 속성
maxlength : 값의 최대 길이를 설정하는 속성
placeholder : 입력 전 특정 데이터를 입력하도록 안내하는 값을 설정
checked : 라디오 또는 체크박스에 체크가 되어있을 때 설정되는 속성
readonly : 데이터를 볼 수 있으나 수정할 수 없게 설정
value : 입력의 실제 값
disabled : 입력필드를 사용할 수 없게 설정하는 속성
required : 데이터를 필수로 입력받도록 지정하는 옵션
name : 요소의 이름을 설정, 서버에서 값을 찾을 때 key로 사용
id : 요소의 유일한 이름을 설정, 스타일을 주거나 동적인
프로그래밍을 할 때 사용
>>파비콘(favicon) 만드릭
- favorites Icon 의 줄임말
- 웹사이트 타이틀 옆에 작은 아이콘으로 표기
: 16 * 16 픽셀이 기본규격
1. png 파일을 icon 파일로 변환
https://convertico.com/
2.icon파일 넣으려는 html이 있는 폴더에 담아두기
<head>
<link rel="icon" href = "파일경로">
</head>
ex) <link rel="icon" href="./favicon.ico">
----------------------------------------------------------------------------------------------------------------------------------
>HTML의 디스플레이 속성
1.inline 태그
- content 크기 만큼 자리를 차지하는 요소
- 문자(텍스트)의 특징을 가진다.
ex) span, img
2.block 태그
- 라인을 모두 차지하는 요소
- 면의 특징
ex) div, ul, li, ...
'프로그래밍 > HTML' 카테고리의 다른 글
| HTML 3일차 - 테이블 (0) | 2021.12.16 |
|---|---|
| HTML 2일차 -태그, 이미지 (0) | 2021.12.15 |
| HTML 1일차 -웹브라우저, HTML 의 요소 (0) | 2021.12.15 |