form : 양식
눈에는 보이지는 않지만 데이터를 서버로 보내는 용도
HTML로만 데이터를 보내는 방법으로는 유일
일부 태그들은 form 안에서만 작동
기능이 포함된 버튼
input type = reset : 자신과 같은 폼 안에 있는 데이터를 삭제해준다.
input type = submit : 자신과 같은 폼태그에 묶여 있는 다른 태그들의 데이터를 보내는 태그, 폼과 한쌍
form action = "abc.jsp" : abc.jsp로 데이터 보낸다.
input type required : 빈 내용을 보내지 못하고 반드시 내용을 채워야 보내기 가능
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- from (양식) : Client 측에서 Server에 데이터를 보내기 위해 사용하는 태그 -->
<form action="abc.jsp">
<input type="text" placeholder="작성자" required><br>
<textarea rows=10 cols=30 placeholder="내용"></textarea>
<br>
<input type=submit value="보내기">
<input type=reset value="다시쓰기">
</form>
</body>
</html>audio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<audio controls src="%ED%8F%B4%ED%82%B4-%EB%84%88%EB%A5%BC%EB%A7%8C%EB%82%98.mp3">
</audio>
</body>
</html>
video
(구글에 test mp4 url 검색)
fieldset : 테두리 만들기
legend : 그룹으로 묶는 구역(필드셋)의 제목
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<fieldset>
<legend>음악</legend>
<audio controls src="%ED%8F%B4%ED%82%B4-%EB%84%88%EB%A5%BC%EB%A7%8C%EB%82%98.mp3">
</audio>
</fieldset>
<fieldset>
<legend>영상</legend>
<video width="320" height="240" controls src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4" ></video>
</fieldset>
</body>
</html>'디지털 컨버전스 > HTML&CSS' 카테고리의 다른 글
| [CSS] Positioning - position: relative (0) | 2020.04.07 |
|---|---|
| [CSS] overflow-y: auto (0) | 2020.04.07 |
| [CSS] Layout (0) | 2020.04.06 |
| [CSS] Internal Style, External Style, 선택자 (0) | 2020.04.03 |
| [HTML] Web-FrontEnd (0) | 2020.04.01 |