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:





Format: 123-45-678

 

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

티스토리툴바