728x90
입력 양식이란?
특정 항목에 사용자가 무언가를 입력할 수 있게 만든 것으로 '폼'이라고도 함
(로그인, 회원가입 등 사용자가 웹사이트로 정보를 보낼 수 있는 요소)※텍스트 박스나 버튼 같은 폼 형태는 HTML 태그로 만들지만, 폼에 입력한 사용자 정보는 ASP나 PHP, JSP 같은 서버 프로그래밍을 이용해서 처리
■ defer: HTML → JavaScript 순서대로 출력하기때문에 반드시 적어줘야 합니다.
data attritubes
우리가 원하는 데이터를 DOM 요소에 사용가능
사용법: data-*
<body>
<div *data-index*="1" *data-display-name*="dream"></div>
*<!--콘솔창에 displayName: 위에 n이 대문자 N으로 변환 (camelCase)화가되었다정의-->*
<div *data-index*="2" *data-display-name*="coding"></div>
<span *data-index*="1" *data-display-name*="dream">sdfsfs</span>
<script>
const dream = document.querySelector('div[data-display-name="dream"');
*//querySelector : CSS에서 우리가 선택자로 쓰는 아이들을 그대로 사용할 수 있음*
console.log(dream.dataset);
console.log(dream.dataset.displayName);
console.log(dream.dataset.index);
</script>■ 사용자가 봐도 괜찮은 데이터는 공개하되 보안적인 부분은 암호화해서 걸어둡니다. (이렇게 data.attribute를 사용함)
■ 폼을 만드는 <form>태그
폼을 만드는 <form>태그- method: 사용 할 수 있는 값은 get/ post 입니다.-post: 입력한 내용의 길이에 제한 받지 않고 사용자가 입력한 내용도 드러나지 않음-action: <form> 태그 안의 내용을 처리해 줄 서버 프로그램을 지정
- -target: action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 합니다.
- -name: 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정
- -get: 데이터를 256 ~4,096byte까지만 서버로 넘길 수 있다. 주소 표시 줄에 사용자가 입력한 내용이 그대로 드러나는 단점이 있다.
<form action="register.php">
</form>■ 자동 완성 기능을 나타내는 autocomplete 속성
자동 완성 기능은 autocomplete 속성을 사용하며 기본 속성값은 "on"
입력한 적 있는 값을 한두 글자 정도 입력하면 예전에 입력내용을 자동으로 보여줍니다.
<form>태그의 autocomplete속성을 off로 지정하면 자동 완성 기능을 끌 수 있습니다.
<form action="" autocomplete="off>
</form>폼 요소를 그룹으로 묶는 <fieldset>, <legend>태그 하나의 폼 안에서 여러 구역을 나누어 표시할 때 <fieldset> 태그를 사용
<fieldset [속성="속성값"]></fieldset>
<fieldset>
<legend>그룹이름</legend>
</fieldset>
*상품 주문양식 만들때
<form action="">
<fieldset>
<legend>상품선택</legend>
</fieldset>
<fieldset>
<legend>배송 정보</legend>
</fieldset>
</form>폼 요소에 레이블을 붙이는 <label> 태그 <label>태그는 <input>태그와 같은 폼 요소에 레이블을 붙일 때 사용 레이블이란 입력한 가까이에 아이디나 비밀번호처럼 붙여 놓는 텍스트 사용 시 폼 요소와 레이블 텍스트가 서로 연결 되었다는 것을 웹 브라우저가 알 수 있음 <label>태그의 for 속성과 폼 요소의 id 속성을 이용해 서로 연결하는 것
폼 요소에 레이블을 붙이는 <label> 태그
<label>태그는 <input>태그와 같은 폼 요소에 레이블을 붙일 때 사용
레이블이란 입력한 가까이에 아이디나 비밀번호처럼 붙여 놓는 텍스트
사용 시 폼 요소와 레이블 텍스트가 서로 연결 되었다는 것을 웹 브라우저가 알 수 있음
<label>태그의 for 속성과 폼 요소의 id 속성을 이용해 서로 연결하는 것<input>태그는 다양한 폼에서 사용자가 입력한 정보를 받을 때 사용
<input type="text"> : 한줄짜리 텍스트를 입력할 때 사용
<input type="password"> : 비밀번호 입력할 때 사용
<input type="search"> : 검색할 때 입력하는 필드
<input type="url"> : URL주소를 입력할 수 있는 필드
<input type="email"> : 이메일 주소를 입력할 수 있는 필드
<input type="tel"> : 전화번호를 입력할 수 있는 필드
<input type="checkbox"> : 2개이상 선택할 수 있는 체크 박스
<input type="radio"> : 1개만 선택할 수 있는 라디오 버튼
+라디오 선택
<input type="radio" name="a">
<input type="radio" name="a">
<input type="number"> : 숫자를 조절할 수 있는 스핀박스
+숫자범위 표시
<input type="number">
<input type="range">
-min: 기본 최솟값 0
-max: 기본 최댓값 100
-step: 기본값 1
-value: 필드에 표시할 초깃값
<input type="range"> : 숫자를 조절할 수 있는 슬라이드 막대
<input type="date"> : 연,월,일을 넣습니다.
<input type="month"> : 연, 월을 넣습니다.
<input type="week"> : 연, 주를 넣습니다.
<input type="date | month | week">
<input type="time"> : 시, 분, 초, 분할 초를 넣습니다.
<input type="datetime"> : 국제 표준시(UTC)의 날짜와 시간(연, 월, 일, 시분, 초, 분할초)
<input type="datetime-local"> : 사용자의 지역 기준(연, 월, 일, 시, 분, 초, 분할 초)
<input type="time | datetime | datetime-local">
<input type="submit"> : 전송 버튼을 넣습니다.
<input type="reset"> : 리셋 버튼을 넣습니다.
<input type="submit | reset" value="버튼에 표시할 내용">
[주문하기]라고 표시된 submit 버튼을 클릭할 시 <form>태그에 연결된 order.php에서 처리
[취소하기]의 경우 reset으로 설정 시 폼에 입력한 내용이 모두 삭제되고 처음상태로 돌아감
<input type="image"> : submit 버튼 대신 사용할 이미지
<input type="image" src="이미지 경로" alt="대체 텍스트">
<input type="button"> : 일반 버튼
"button"의 경우 submit/ reset 기능은 없고 오직 버튼 형태만 삽입
버튼을 클릭해서 javascript를 실행할 때 사용
<input type="button" value="버튼에 표시할 내용">
[공지 창 열기]라는 버튼을 만들고 클릭하면 javascript의 window.open( )함수를 실행
<form>
<input type="button" value="공지 창 열기" onclick="window.open('notice.html')">
</form>
<input type="file"> : 파일을 첨부할 수 있는 버튼
<input type="hidden"> : 사용자에게는 보이지 않지만 서버로 넘겨주는 값이 필드를 만듬
<input type="hidden" name="이름" value="서버로 넘길 값">
<input type="hidden" value="사이트를 통한 직접 로그인">
<label>아이디: <input type="text" id="user_id" size="10"></label>
<label>비밀번호: <input type="password" id="user_pw" size="10"></label>
<input type="submit" value="로그인">
원하는 요소에 마우스 포인터 표시
반드시 읽어야하는 요소 'required'
<input type=텍스트-입력-필드 autofocus required>
힌트를 표시해 주는 placeholder 속성
<input type="text" placeholder="안녕">
css-> ::placeholder { color: #eee }
*size/ value/ maxlength/ value/ checked/ readonly여러줄을 입력하는 텍스트 영역 <textarea> 태그
<textarea>내용</textarea>
<label for="memo">메모</label>
<textarea id="memo" cols="40" rows="4"></textarea>
-cols: 텍스트 영역의 가로 너비
-rows: 텍스트 영역의 세로 길이드롭다운 목록을 만들어주는 <select>,
<option> 태그 <select>태그 속성
- size : 화면에 표시할 드롭다운 항목의 갯수를 지정
- multiple : 드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용 <option>태그 속성
- value : 해당 항목을 선택할 때 서버로 넘겨줄 값을 지정
- selected : 드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여줄 항목을 지정
<select>
<option value="값1">내용1</option>
<option value="값2">내용2</option>
</select>데이터 목록 만들어 주는 <datalist>,
<option> 태그 데이터 목록을 만들 때는 <datalist> 태그를 이용해 데이터 목록의 시작과 끝을 표시 그 사이에
<option태그를 사용해 각 데이터의 옵션을 표시
데이터 목록 만들어 주는 <datalist>, <option> 태그
데이터 목록을 만들 때는 <datalist> 태그를 이용해 데이터 목록의 시작과 끝을 표시
그 사이에 <option태그를 사용해 각 데이터의 옵션을 표시<form> : 폼의 시작과 끝
<fieldset> : 폼 요소를 그룹으로 묶습니다.
<legend> : 필드셋에 제목을 붙입니다.
<input> : 사용자가 입력할 필드 삽입 <select>,
<option> : 드롭다운 목록을 삽입
<textarea> : 텍스트를 여러 줄 입력할 수 있는 텍스트 영역
<datalist> : 데이터 목록 삽입
<input>태그의 속성
autofocus : 웹 문서가 열리면 필드 안에 마우스 포인터를 표시
placeholder : 텍스트 필드에 힌트를 표시
readonly : 입력 필드를 읽기 전용으로 지정
required : 필수 입력 필드를 지정
max : 숫자 입력 필드에서 최댓값을 지정
min : 숫자 입력 필드에서 최솟값을 지정
step : 숫자 입력 필드에서 증감할 간격을 지정
maxlength : 텍스트 관련필드에서 입력할 수 있는 최대길이 지정
minlength : 텍스트 관련필드에서 입력할 수 있는 최소길이 지정
size : 텍스트 관련 필드에서 화면에 표시할 크기를 지정
list : 연결할 데이터 목록을 지정