20240731수업
input type 종류
input tupe 형식
<input type=" ">
<!DOCTYPE html><!-- html 5 버전 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>HTML INPUT type</h2>
<form action="https://www.nate.com/index.html" method="GET">
<!-- get방식(용량小,a태그의 전송)떄문에 주소줄에 name속성이 보임
post방식(용량大)은 안보임
액션에 있는 주소로 name속성을 보냄. -->
button:<input type="button" value="버튼"
onclick="alert('버튼을 클릭하였습니다')" /><br>
<!-- 경고창 뜨는 버튼 -->
button:<input type="button" value="버튼" /><br />
<!-- 그냥 버튼 -->
<button>:<button>버튼</button><br>
<!-- 누르면 action링크로 이동하는 버튼 -->
<!-- <: 글자입력, <:less than, >:greater than -->
text(userid):<input type="text" name="userid" /><br>
password(passwd):<input type="password" name="passwd" /><br>
<!--비밀번호 입력하면 '*'로 표시됨-->
hidden(page):<input type="hidden" name="page" value="3" /><br>
<!-- tomcat을 통해서 java로 전달
hidden:안보이지만 같이 보내짐(radio,checkbox도 같이) -->
radio<input type="radio" /><br>
<!--◉표시가 나타나는 속성-->
checkbox<input type="checkbox" /><br>
<!--체크박스가 나타남 지우기 가능-->
image<input type="image" src="images/favicon.ico" 가나/><br> <!--이미지 버튼-->
file<input type="file" src="" /><br>
submit<input type="submit" /><br>
<!-- 로그인 버튼만드는 submit -->
reset<input type="reset" /><br>
<hr />
<!--html5 input-->
email<input type="email" name="email" /><br>
<!--aaaaa@naver.com과 같은 유형만 입력됨-->
search<input type="search" name="search" /><br>
tel<input type="tel" name="tel" /><br>
<!-- 핸드폰에서 전화로 연계 -->
color<input type="color" name="color" /><br>
url<input type="url" name="url" /><br>
<!--url로 연결됨-->
number<input type="number" name="number" /><br>
<!--숫자만 입력가능 but 글자제한 적용이 불가>>js를 이용해서 해결(추후에)-->
range<input type="range" name="range" /><br>
date<input type="date" name="date" /><br>
datetime-local<input type="datetime-local" name="datetime-local" /><br>
month<input type="month" name="month" /><br>
week<input type="week" name="week" /><br>
time<input type="time" name="time" /><br>
<!-- 브라우저마다 출력 화면이 다름 -->
string<input type="string" /><br>
color<input type="colom" name="colom" /><br>
</form>
</body>
</html>
See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen.
type의 기본값은 "text"임.
<xml규칙>
XML : extensible markup language
•markup language(태그를 가지고 쓰는 언어)의 기준 언어-인터넷 문서 표현
html, data -> xml 규칙 표현
1. 대소문자 구분한다.
(원래 HTML은 대소문자 구분안했지만 최신버전에서는 소문자가 원칙)
2. 모든 tag 는 pair다.
모든 tag 열면 닫아야 한다 <p>< /p>, <br />
3. 속성값은 반드시 "" 로 표시한다(but ""안에 ""를 넣을때는 ''로 표시)
4. root element는 필수이며 1개이다.
5. 모든 xml은 적절하게 중첩되어야 한다
<div><b></div><b>=틀림
6. tag 안에는 주석 사용금지
참조:https://www.ibm.com/docs/ko/b2bis?topic=syntax-xml-rules
XML 구문 규칙
XML 구문을 생성할 때 다음 규칙을 따라야 합니다. 모든 XML 요소는 닫는 태그를 가지고 있어야 합니다. XML 태그는 대소문자를 구분합니다. 모든 XML 요소는 적절하게 중첩되어야 합니다. 모든 XML
www.ibm.com
참조(input type종류): https://www.w3schools.com/html/html_form_input_types.asp
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'HTML|CSS' 카테고리의 다른 글
| [html/css] 다양한 표현 방식 (0) | 2024.08.03 |
|---|---|
| [html/css] 로그인/회원가입 창 구현 (0) | 2024.08.02 |
| [html/css] table태그 (표 만들기), reset css(스타일 시트 초기화) (0) | 2024.08.01 |
| [html/css] a 태그(문서or링크 연결),padding과 margin의 차이 (0) | 2024.08.01 |
| [html/css]이미지 태그(삽입),css적용 (0) | 2024.08.01 |