form태그:
사용자가 입력할 수 있는 양식을 만드는 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>폼 관련 태그 </h1>
<p>form태그는 html에서 사용자가 입력할 수 있는 양식을 제공하는 태그.
<br>form태그 내의 input태그들을 통해 사용자가 입력한 정보를 서버로 넘기는 역할.<br>
*action 속성 : 폼 내부에 입력된 값들을 전송받을 서버를 입력.<br>
*method 속성 : get / post 방식으로 전송 방식을 지정
</p>
<form>
<input type = "text" size="30" name = "search"> <input type ="submit" value="검색">
</form>
<p>submit 버튼을 클릭 했을 때 action에 지정한 위치로 method에 지정한 방식으로
input 태그에 입력한 value값을 전달한다.
</p>
<hr>
<form>
<fieldset>
<!-- 묶어주는 역할-->
<legend> 필드셋의 제목을 작성하는 부분.</legend>
<label>입력1 :</label><input type = "text"><br>
<label>입력2 :</label><input type = "text"><br>
<label>입력3 :</label><input type = "text"><br>
</fieldset>
<br>
<fieldset>
<!-- 묶어주는 역할-->
<legend> 필드셋으로 묶은 영역 별로 구분이 된다.</legend>
<label>입력1 :</label><input type = "text"><br>
<label>입력2 :</label><input type = "text"><br>
<label>입력3 :</label><input type = "text"><br>
</fieldset>
</form>
<hr>
<form>
<h2>text와 관련된 input태그</h2>
<h3>type = "text"</h3>
<p> 한 줄 짜리 텍스트를 입력할 수 있는 텍스트 박스.</p>
<label>아이디: </label> <input type ="text" name="userID" size ="30" placeholder="아이디를 입력하세요."
maxlength="15" value = "parkys" autofocus>
<!-- autofoucus : 자동으로 입력박스에 커서가 들어감-->
<br>
<h3>type="password"</h3>
<p>비밀번호 입력할 수 있는 텍스트 박스.</p>
<label>비밀번호: </label><input type="password" name="userPW" size="30" placeholder="비밀번호를 입력하세요.">
<!-- 입력한 문자가 *로 표기됨-->
<br>
<h3>type="search" , type="url" , type="email" , type="tel" </h3>
<p>보이기는 텍스트 필드와 비슷하지만 각각의 정보에 맞게 분화된 기능을 제공하는 텍스트 상자</p>
검색: <input type="search" name="searchtext" size="30" placeholder="검색어 입력"><br>
<!--검색어 지우기기능 포함-->
홈페이지:<input type="url" name="homepage" value="http://"><br>
<!-- url 입력 , 공통된건 밸류에 미리 입력가능-->
이메일:<input type = "email" name = "email"><br>
<!-- @값 필수 입력-->
전화번호:<input type ="tel" name="tel"><br>
<br><br>
<input type="submit" value="전송"> <input type="reset" value="취소">
</form>
<form>
<h2>숫자와 관련된 input태그</h2>
<h3>type="number"</h3>
<p>입력창에 숫자를 입력하는 것이 기본인 태그</p>
수량 : <input type="number" name ="amount" min="0" max="100" step="10">
<!-- 스텝은 몇단위씩 수량이 올라가는지 설정-->
<h3>type="range"</h3>
<p>슬라이들 바를 통해 숫자를 입력받는 태그</p>
점수 : <input type="range" name="score" min="0" max="100">
</form>
<hr>
<form>
<h2>날짜와 관련된 Input 태그</h2>
date: <input type="date">
month:<input type="month"><br>
time:<input type="time"><br>
datetime-local:<input type="datetime-local">
</form>
<hr>
<form>
<h2>라디오버튼과 체크박스</h2>
<h3> type = "radio" </h3>
<label>성별: </label>
<input type="radio" id ="female" name="gender" value="F"><label for="female">여자</label>
<input type="radio" id="male" name="gender" value="M"><label for="male">남자</label>
<!-- 같은 값으로 매겨줘야함 , 선택지를 만드는 타입 / label에 for를 추가해 라벨을 눌러도 선택이되게할수있음-->
<br>
<h3>type:"checkbox"</h3>
취미 : <br>
<input type="checkbox" id="baseball" name="hobby" value="baseball">야구
<br>
<input type="checkbox" id = "football" name="hobby" value="football">축구
<br>
<input type="checkbox" id = "basketball" name="hobby" value="basketball">농구
<br><br>
<input type="submit" value="전송">
</form>
<form>
<h2>그 밖에 input태그</h2>
색상선택:<input type="color" name="color"><br>
파일선택:<input type="file" name="upload"><br>
숨김: <input type="hidden" name="hidden"><br>
버튼:<input type="button" value="버튼">
<button type="subimt">button</button>
</form>
<hr>
<h2>textarea</h2>
<p>input type="text" 와 비슷하지만 여러줄입력가능</p>
<form>
<textarea name = "area" cols="30" rows="10" style="resize: none"></textarea>
</form>
<h2>select 태그와 option태그</h2>
<p>사용자가 내용을 입력하는 것이 아니고 여러 옵션 중에서 선택하게 하고싶을때 사용하는
드톱다운 목록을 보여주는 태그
</p>
<form>
<label>국적:</label>
<select name="name">
<option value="kr">한국</option>
<option value="us">미국</option>
<option value="jp">일본</option>
<option value="uk">영국</option>
</select>
<br>
<select name="name" size="2" multiple>
<option value="kr">한국</option>
<option value="us">미국</option>
<option value="jp">일본</option>
<option value="uk">영국</option>
</select>
<br><br>
<input type="submit" value="전송">
</form>
</body>
</html>
gruoping :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{
border:1px dashed red;
margin: 10px;
}
#body{
height: 400px;
}
#left{
width: 45%;
height: 90%;
float:left
}
#right{
width: 45%;
height: 90%;
float: right;
}
</style>
</head>
<body>
<!--
시멘틱 구조
일반적인 div태그로만 구조를나누었다.
컴퓨터입장에서 어떤 태그가 어떤 기능인지 분별이 어려워
특정태그에 의미를 부여하여 웹페이지를 작성 가능
header: 제목 , 로고 , 아이콘 등
nav : 탐색 , 메뉴 등
section : 콘텐츠 주제별 묶음
article : 독립적으로 사용할 수 있는 내용 정의
aside : 광고나 메인과 상관없는 내용
footer :저자 , 저작권 , 연락처 등
-->
<div id="header">
<h1>제목</h1>
<div>
<span><a href="">메뉴1</a></span>
<span><a href="">메뉴2</a></span>
<span><a href="">메뉴3</a></span>
<span><a href="">메뉴4</a></span>
</div>
</div>
<hr>
<div id="body">
<div id="left">
<p>왼쪽 본문 내용</p>
</div>
<div id="right">
<p>오른쪽 본문 내용</p>
</div>
</div>
<div id="footer">
copyright © all rights reserved...
</div>
</body>
</html>
'HTML' 카테고리의 다른 글
| [HTML]HTML#2 (0) | 2024.04.30 |
|---|---|
| [HTML] HTML #1 (0) | 2024.04.22 |