Form 태그 실습 코드 (전화번호 입력) - form_tel.html
<!DOCTYPE html>
<html>
<body>
<h2>Telephone Field</h2>
<p>The <strong>input type="tel"</strong> is used for input fields that should contain a telephone number:</p>
<form action>
<label for="phone">Enter a phone number:</label><br><br>
<input type="tel" id="phone" name="phone" placeholder="123-4567-8900" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}" required><br><br>
<small>Format: 123-45-678</small><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Telephone Field
The input type="tel" is used for input fields that should contain a telephone number:
Form 태그 실습 코드 (간단한 회원정보 실습) - form01.html
<!DOCTYPE html>
<html>
<body>
<h2>Password field</h2>
<p>The <strong>input type="password"</strong> defines a password field:</p>
<form action>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd"><br><br>
<input type="submit" value="Submit">
</form>
<p>The characters in a password field are masked (shown as asterisks or circles).</p>
</body>
</html>
Password field
The input type="password" defines a password field:
The characters in a password field are masked (shown as asterisks or circles).
form 태그 실습 코드 (form 태그의 인코딩 설정) - form_enctype.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>form 태그의 인코딩 설정</h3>
<p>폼태그에서 일반 데이터 전송시 인코딩은 application/x-www class="form-urlen 기본값으로</p>
<form enctype="multipart/form-data">
상품이미지<input type ="file">
</form>
</body>
</html>
Document form 태그의 인코딩 설정
폼태그에서 일반 데이터 전송시 인코딩은 application/x-www class="form-urlen 기본값으로
form 태그 실습 코드 (form 태그의 인코딩 설정) - form_enctype2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>form태그의 인코딩 설정</h3>
<p>폼태그에서 데이터 전송시 파일이 첨부기능이 포함되는 경우는
인코딩은 multipart/form-data으로 사용</p>
<form enctype="multipart/form-data">
상품이미지<input type="file">
</form>
</body>
</html>
Document form태그의 인코딩 설정
폼태그에서 데이터 전송시 파일이 첨부기능이 포함되는 경우는 인코딩은 multipart/form-data으로 사용
elements 실습 코드 - form_elements.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>form의 자식요소들.</h3>
<form>
<p>폼태그의 하위요소를 학습하자.</p>
<input type="text"><br>
<input type="submit" value="전송">
</form>
</body>
</html>
Document form의 자식요소들.
input 태그 속성들을 알기 위한 실습 코드 - input.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>input태그 type속성들</h3>
<form>
<input type="button" value="아이디찾기"><br>
<input type="checkbox">동의<br>
<input type="color"><br>
<input type="date"><br>
<input type="datetime-local"><br>
<input type="email"><br>
<input type="file"><br>
<input type="hidden"><br>
<input type="image" src="/image/join.jpg"><br>
<input type="month"><br>
<input type="radio" name="gender">남자<input type="radio" name="gender">여자<br>
<input type="range"><br>
<input type="reset"><br>
<input type="search"><br>
<input type="submit" value="회원가입"><br>
<input type="tel"><br>
<input type="time"><br>
<input type="url"><br>
<input type="week">
</form>
</body>
</html>
Document input태그 type속성들
textarea 실습 코드 - textarea.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>textarea 태그에는 value 속성이 없다.</h3>
<textarea>웹 개발을 공부하는 중입니다.</textarea>
</body>
</html>
Document textarea 태그에는 value 속성이 없다.
'Devlopment > HTML & CSS' 카테고리의 다른 글
[CSS] Backgrounds - 배경색 설정 (0) | 2024.01.05 |
---|---|
[CSS] CSS란, 외부 CSS와 내부 CSS 적용 방법 및 CSS 실습 (1) | 2024.01.04 |
[HTML] Form 태그 (1) - 이론 및 간단한 예제 실습 (0) | 2024.01.04 |
[HTML] Tables <table> 태그, Ifames 태그 이론 및 실습 (2) | 2024.01.04 |
[HTML] Image/Image Map 이론 및 실습 (0) | 2024.01.04 |