Audio / Viedio
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>오디오 삽입</title>
</head>
<body>
<h3>오디오 삽입</h3>
<hr>페이지 로드이후 음악이 연주됩니다.
<p>
<audio src="../images/EmbraceableYou.mp3" controls autoplay loop>
브라우저가 audio 태그를 지원하지 않습니다.
<!-- https://www.mp3juices.cc/en09 -->
</audio>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="charset=UTF-8">
<title>비디오 삽입</title>
</head>
<body>
<h3>비디오 삽입</h3>
<hr>
<video src="../images/bear.mp4" width="320" height="240"
controls autoplay>
브라우저가 video 태그를 지원하지않습니다.</video>
</body>
</html>
위처럼 html 을 활용해서 비디오와 오디오 파일 들을 삽입 가능하다.
Form Tag
.폼 태그는 게시판,회원가입 , 로그인 부분에 해당하는
문서를 만들경우 사용됩니다.
입력 글상자,라디오 버튼, 선택상자, 드롭다운 메뉴등의
다양한 형태로 방문자에게 내용을 선택할수 있게하며
입력한 정보는 PHP,JSP 와 같은 웹 프로그래밍 요소와
연동하여 실제 서버 축에 전송 됩니다.
. 웹페이지를 통해 사용자 입력을 받는 폼을 Webform 혹은 Form
이라고 합니다
HTML5 에서는 input,textarea,select 등 폼을 만들기 위한
다양한 태그들을 제공하며 이 태그들은 form element 라고 부릅니다.
폼은 로그인 , 등록, 검색 , 예약, 쇼핑 들의 다양한
웹 서비스에서 사용자의 입력을 받기위해 사용합니다.
.형식
<Form name="폼이름" method="post" action="폼 실행 프로그램">
폼 양식 요소,,,,
</Form>
. name : 폼 양식의 이름을 지정합니다.
한 문서 내에 여러개의 폼양식이 있는경우 구분을 지어줍니다.
. method : post,get 중 하나를 지정합니다.
. action : 폼 양식에 입력한 값들을 실제로 전송시킬 프로그램 경로를 지정합니다.
폼 만들기
폼 요소 의미
<imput type"text"> 한줄텍스트 입력창
<imput type"password"> 암호 입력을 위한 한줄텍스트 입력창
<imput type"button"> 단순 버튼
<imput type"submit"> 웹 서버로 폼데이터를 전송시키는 버튼
<imput type"reset"> 입력된 폼 데이터를 초기화 시키는 버튼
<imput type"image"> 이미지 버튼
<imput type"checkbox|radio"> 체크박스와 라디오 버튼
<select> 드롭다운 리스트를 가진 콤보 박스
<imput type"month|week|date|time|datetime-local"> 년,월,일,시간 등의 시간 정보 입력창
<imput type"number|range"> 스핀 버튼과 슬라이드 바로 편리한 숫자입력창
<imput type"color"> 색 입력을 쉽게하는 컬러 다이어그램
<imput type"file"> 로컬 컴퓨터의 파일을 선택하는 폼 요소
<textarea> 여러줄의 텍스트 입력 창
<!DOCTYPE html>
<html>
<head>
<meta charset="charset=UTF-8">
<title>Form 정의와 입력 글상자 삽입하기</title>
</head>
<body leftmargin="150" topmargin="180" background="../images/back_green.gif">
<img src="../images/title_form1.jpg" >
<p>
<form>
ID: <input type="text" name="id" value="공백없이입력" size="20"> <p>
PASSWORD : <input type="password" name="password" size="20" maxlength="10"><p>
MESSAGE : <br><br>
<textarea name="message" rows="10" cols="70">메세지를 입력하여주세요</textarea>
</form>
</body>
</html>
Form 코드를 이용해서 홈페이지의 회원가입 화면을 구현가능하다. 여러모로 활용 가능하다.
'국비 과정 > HTML & CSS' 카테고리의 다른 글
| HTML (나만의 홈페이지 만들기) (0) | 2022.09.22 |
|---|---|
| 국비 - 0908 ( HTML META DATA 삽입 ) (0) | 2022.09.08 |
| 국비 - 0907 ( Hyper Link ) (2) | 2022.09.07 |
| 국비 - 0906 ( HTML ) (0) | 2022.09.06 |
