<오늘의 학습>
1. Visual Studio Code 설치
2. HTML
3. 텍스트 태그
4. 리스트 태그
5. 테이블 태그
6. 멀티미디어 태그
7. form 태그
8. input 태그
7. from 태그
| 종류 |
설명 |
| <from> |
폼의 시작과 끝을 만든다.
action 을 이용해 <form> 태그 안의 내용을 처리해 줄 서버 프로그램을 지정할 수 있다.
target 속성을 이용하여 현재 창이 아닌 다른 위치에서 창을 열 수 있도록 지정할 수 있다. |
| <fieldset> |
폼 요소를 그룹으로 묶는다. |
| <legend> |
필드셋의 제목을 붙인다. |
| <input> |
사용자가 내용을 입력할 필드를 삽입한다. 닫을 필요가 없다.
<label> |
| <label> |
<input> 태그와 같은 폼 요소에 레이블을 붙일 때 사용한다. 입력란 가까이에 아이디나 비밀번호처럼 붙여 놓은 텍스트를 의미한다.
태그 안에 폼 요소를 넣거나, 태그와 폼 요소를 따로 사용하고 for 속성과 id 속성을 이용해 서로 연결할 수 있다. |
| <select> & <option> |
드롭다운 목록을 삽입한다. |
| <textarea> |
텍스트를 여러 줄 입력할 수 있는 텍스트 영역을 삽입한다. |
| <datalist> |
데이터 목록을 삽입한다. |
- submit : from 태그의 action 부분을 실행한다.
- : 스페이스바 한 칸
▶ 실습 1 ) 폼 만들기
<body>
<form action="">
<fieldset>
<legend>상품</legend>
<ul>
<li>자바책</li>
<li>DB책</li>
<li>HTML책</li>
<li>스타벅스 기프티콘</li>
</ul>
</fieldset>
</form>
</body>
▶ 실습 2 ) 폼 만들기
<body>
<fieldset>
<label>아이디:<input type = "text"></label>
<label>비밀번호:<input type="password"></label>
<button>로그인</button>
</fieldset>
</body>
▶ 실습 2 ) 폼 만들기
<h1>레드향 주문하기</h1>
<fieldset>
<legend>상품 선택</legend>
</fieldset>
<br>
<fieldset>
<legend>배송 정보</legend>
<ul>
<li><label>이름:<input type = "text"></label></li>
<li><label>배송 주소:<input type = "text"></label></li>
<li><label>이메일:<input type = "text"></label></li>
<li><label>연락처:<input type = "text"></label></li>
</ul>
</fieldset>
<label>이름 : <input></label>
▶ 실습 3 ) 폼 만들기
<fieldset>
<legend>상품 선택</legend>
<h4>주문할 상품을 선택해주세요.</h4>
<ul>
<li><label><input type="checkbox" value="apple">사과</label></li>
<li><label><input type="checkbox" value="orange">오렌지</label></li>
<li><label><input type="checkbox" value="kiwi">키위</label></li>
<li><label><input type="checkbox" value="banana">바나나</label></li>
</ul>
<h4>포장 선택</h4>
<ul>
<li><label><input type="radio" name="present" value="pre">선물 포장</label></li>
<li><label><input type="radio" name="present" value="nopre">선물 포장 안 함</label></li>
</ul>
</fieldset>
▶ 실습 4 ) 드롭 다운 만들기
<select name="" id="">
<option value="hong">홍길동</option>
<option value="ok">옥한빛</option>
<option value="kim">김철수</option>
</select>
▶ 실습 5 ) 텍스트 영역 만들기
<textarea rows="10" cols="30"></textarea>
8. input 태그
▶ <input> 태그의 유형(type)
| 종류 |
설명 |
| text |
한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣는다. |
| password |
비밀번호를 입력할 수 있는 필드를 넣는다. |
| search |
검색할 때 입력하는 필드를 넣는다. |
| url |
URL 주소를 입력할 수 있는 필드를 넣는다. |
| email |
이메일 주소를 입력할 수 있는 필드를 넣는다. |
| tel |
전화번호를 입력할 수 있는 필드를 넣는다. |
| checkbox |
여러 항목 중 2개 이상을 선택할 수 있는 체크 박스를 넣는다. |
| radio |
여러 항목 중 1개만 선택할 수 있는 라디오 버튼을 넣는다. |
| number |
숫자를 조절할 수 있는 스핀 박스를 넣는다. |
| range |
숫자를 조절할 수 있는 슬라이드 막대를 넣는다. |
| date |
사용자 지역을 기준으로 날짜(연, 월, 일)를 넣는다. |
| month |
사용자 지역을 기준으로 날짜(연, 월)를 넣는다. |
| week |
사용자 지역을 기준으로 날짜(연, 주)를 넣는다. |
| time |
사용자 지역을 기준으로 시간(시, 분, 초, 분할 초)을 넣는다. |
| datatime |
국제 표준시(UTC)로 설정된 날짜와 시간을 넣는다. |
| datatime_local |
사용자가 있는 지역을 기준으로 날짜와 시간을 넣는다. |
| submit |
전송 버튼을 넣는다. |
| reset |
리셋 버튼을 넣는다. |
| image |
submit 대신 사용할 이미지를 넣는다. |
| button |
일반 버튼을 넣는다. |
| file |
파일을 첨부할 수 있는 버튼을 넣는다. |
| hidden |
사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드를 만든다. |
▶ <input> 태그의 속성
| 종류 |
설명 |
| autofocus |
웹 문서가 열리면 입력 필드 안에 마우스 포인터를 표시한다. |
| placeholder |
텍스트 필드에 힌트를 표시한다. |
| readonly |
입력 필드를 읽기 전용으로 지정한다. |
| required |
필수 입력 필드를 지정한다. |
| max |
숫자 입력 필드에서 최댓값을 지정한다. |
| min |
숫자 입력 필드에서 최솟값을 지정한다. |
| step |
숫자 입력 필드에서 증감할 간격을 지정한다. |
| maxlength |
텍스트 관련 필드에서 입력할 수 있는 최대 길이를 지정한다. |
| minlength |
텍스트 관련 필드에서 입력할 수 있는 최소 길이를 지정한다. |
| size |
텍스트 관련 필드에서 화면에 표시할 크기를 지정한다. |
| list |
연결할 데이터 목록을 지정한다. |
▶ 실습 ) input 버튼 만들기
<input type="submit" value="제출">
<input type="reset" value="초기화">
<input type="button" onclick="alert('Hello~')" value="그냥 버튼">
<input type="file" value="파일 선택">
2023년 6월 20일 화요일
<25일차 수업 후기>
테이블을 만들거나, 회원 가입 창 등의 틀을 만들 수 있다는 것이 신기했다.
웹 사이트 등을 만들어보고 싶다는 생각을 가지고 수업을 듣기 시작했기 때문에 더 열심히 수업을 들어야 할 것 같다.
