2022.5.2.(월)
html 함수
1. HTML
1-1. input label
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
<input name="" id="">
name : 웹 프로그램과 연계되는 속성으로
한 페이지 안에서 고유한 값을 명시
id : 해당 페이지에서 그 요소를 식별하기 위한 값으로
고유한 값을 명시
-> name과 id값은 서로 동일하게 지정해도 무관하다.
type : text, password, hidden
속성에 따라 화면에 표시되는 요소의 종류가 결정
value : 해당 요소에 기본적으로 작성되어 있을 값을 기술
maxlength : 최대 입력 가능한 글자 수를 제한
placeholder : 설명글, 사용자가 직접 값을 입력하는 형태의
input 요소에 지정하여 값이 입력되기 전에 보여질
설명글을 표시한다.
-->
<!--
<textarea></textarea> : 장문을 입력하기 위한 요소
-->
<!--
<label></label> : 입력 요소 앞이나 뒤에서 표시되는 제목을 구성
<input> 태그의 id와 연결
-->
<form>
<!-- fieldset : 입력 내용에 대한 그룹을 명시 -->
<fieldset>
<!-- 그룹의 제목 -->
<legend>내용 입력하기</legend>
<label for="user_id">아이디 :</label>
<input type="text" name="user_id" id="user_id"
maxlength="5" placeholder="아이디를 입력해주세요"><br>
<label for="user_name">회원이름 :</label>
<input type="text" name="user_name" id="user_name"
maxlength="5" placeholder="이름을 입력해주세요"><br>
<label for="user_pwd">패스워드 :</label>
<input type="password" name="user_pwd" id="user_pwd"
maxlength="5" placeholder="패스워드를 입력해주세요"><br>
<label for="memo">자기소개 :</label>
<textarea name="memo" id="memo" maxlength="100"></textarea><br>
<label for="data">숨겨진 항목 :</label>
<input type="hidden" name="data" id="data" value="숨겨진 데이터">
</fieldset>
</form>
</body>
</html>1-2. 체크박스
(1) radio와 checkbox
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
<input> : type="checkbox" or type="radio"
radio : 여러 항목 중 한 가지만 선택 가능
checkbox : 여러 항목 중 복수로 선택 가능함
-->
<p>
선택 1 : <input type="radio" name="commonra">
선택 2 : <input type="radio" name="commonra">
선택 3 : <input type="radio" name="commonra">
선택 4 : <input type="radio" name="commonra">
</p>
<!-- hr : 구분 선 -->
<hr/>
<p>
<h1>색상(단일선택)</h1>
붉은색 : <input type="radio" name="color">
검은색 : <input type="radio" name="color">
파란색 : <input type="radio" name="color">
보라색 : <input type="radio" name="color" checked>
<!-- checked : 기본적으로 체크되어 화면에 표시된다. -->
</p>
<hr/>
<p>
<h1>사이즈(다중선택)</h1>
95 : <input type="checkbox" name="size">
100 : <input type="checkbox" name="size">
105 : <input type="checkbox" name="size">
</p>
</body>
</html>
(2) value값 지정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
<fieldset>
<legend>취미 선택하기</legend>
<input type="checkbox" name="hobby" id="hobby1" value="soccer">
<label for="hobby1">축구</label>
<input type="checkbox" name="hobby" id="hobby2" value="basketball">
<label for="hobby2">농구</label>
<input type="checkbox" name="hobby" id="hobby3" value="baseball">
<label for="hobby3">야구</label>
</fieldset>
<br>
<fieldset>
<legend>성별 선택하기</legend>
<input type="radio" name="gender" id="gender_m" value="male">
<label for="gender_m">남자</label>
<input type="radio" name="gender" id="gender_f" value="female">
<label for="gender_f">여자</label>
</fieldset>
</form>
</body>
</html>1-3. selectbox
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
<select>
<option></option>
</select>
<select> : 드롭다운 박스를 구성
<option> : 선택 항목을 구성
selected : 해당 option을 기본적으로 선택 상태에 있게 한다.
-->
<fieldset>
<legend>이동 통신사 선택하기</legend>
<label for="telecom">이동 통신사 선택</label>
<select name="telecom" id="telecom">
<option value="SKT">SKTelecom</option>
<option value="KT">KT</option>
<option value="LG">LG U+</option>
</select>
</fieldset>
</body>
</html>1-4. button
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="http://localhost/form.jsp">
<input type="text">
<input type="submit" value="전송">
<input type="button" value="버튼" onclick="alert('hello world')">
<!-- button : 순수 html -->
<input type="reset">
</form>
</body>
</html>1-5. 파일 입력 method
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="http://localhost/method.jsp" method="post">
<input type="text" name="id">
<input type="password" name="pwd">
<input type="submit">
</form>
<!--
http://localhost/method.jsp?id=test&pwd=password
Get방식 : 현재 사용하는 방식, url 방식으로 전송, 기본 전송 방식
Post방식 : url 방식이 아닌 데이터를 숨겨서 전송
-->
</body>
</html>1-6. FileUpload
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
<form enctype="multipart/form-data">
<input type="file">
</form>
enctype="multipart/form-data" : 이 속성이 명시가 되어야 한다.
method="post" : 이 속성이 명시가 되어야 한다.
type="file" : 웹 프로그램으로 파일을 전송할 수 있도록 찾아보기 버튼을 표시
한 번에 하나의 파일만 첨부 가능하다.
-->
<form action="http://localhost/upload.jsp"
enctype="multipart/form-data"
method="post">
<input type="file">
<input type="submit">
</form>
</body>
</html>
도비는 자유에요!😝