AR삽질러

HTML Form Tags - (2) 본문

WEB/HTML, CSS

HTML Form Tags - (2)

아랑팡팡 2023. 10. 11. 01:17
728x90

 

HTML Form Tags - (2)

 

https://developer.mozilla.org/ko/docs/Web/HTML/Element

 

HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN

메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진, 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이지 안에

developer.mozilla.org

 

<body>
    <form>

	</form>
</body>

<body>

 - body 태그 내에 있는 콘텐츠가 브라우저에 표시된다.

<form>

 - 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타낸다.

 

<body>
    <form>
        <input />
    </form>
</body>

<input>

 - 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다. 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존해한다.

 

<body>
    <form>
        <input type="color" />
    </form>
</body>

 

<body>
    <form>
        <input type="password" />
    </form>
</body>

<input type="password">

- 비밀번호 입력 필드를 만들어 기본적으로 마스킹(별표나 점으로)표시된다.

 

<body>
    <form>
        <input placeholder="Name" type="text" />
        <input placeholder="Last Name" type="text" />
        <input placeholder="User Name" type="text" />
        <input placeholder="Password" type="password" />
    </form>
</body>

<input placeholder="Name" type="text" />

- 입력 필드에 회색 텍스트로 미리보기 메시지를 표시할 수 있다.

- text로 텍스트 입력필드를 생성한다.

 

<body>
    <form>
        <input required placeholder="Name" type="text" />
        <input required placeholder="Last Name" type="text" />
        <input required placeholder="User Name" type="text" />
        <input required placeholder="Password" minlength="10" type="password" />
        <input type="submit" value="Create Account" />
    </form>
</body>

minlength

<input required placeholder="Password" minlength="10" type="password" />

- minlength = "10" : 비밀번호 필드에 입력할 수 있는 문자열의 최소 길이를 지정한다. "10"으로 설정한 경우 사용자는 최소 10자 이상의 비밀번호를 입력해야 한다.

 

 

<body>
    <form>
        <input type="file" /><br>
        <input required placeholder="Name" type="text" />
        <input required placeholder="Last Name" type="text" />
        <input required placeholder="User Name" type="text" />
        <input required placeholder="Password" minlength="10" type="password" />
        <input type="submit" value="Create Account" />
    </form>
</body>

file

<input type="file" />

- type="file" 은 파일 업로드를 위한 입력필드로 사용자는 로컬 파일을 선택 할 수 있다.

 

<body>
    <form>
        <input type="file" accept=".pdf" /><br>
        <input required placeholder="Name" type="text" />
        <input required placeholder="Last Name" type="text" />
        <input required placeholder="User Name" type="text" />
        <input required placeholder="Password" minlength="10" type="password" />
        <input type="submit" value="Create Account" />
    </form>
</body>

file에 accept를 지정해 사용자가 업로드할 수 있는 파일 유형을 제한한다.

 

 

Tags ID

<body>
    <form>
        <label for="Profile">Profile Photo</label><br>
        <input id="Profile" type="file" accept=".pdf" /><br><br>

        <label for="website">Web Site URL</label>
        <input id="website" required placeholder="Url" type="url" /><br>

        <label for="email">Email</label>
        <input id="email" required placeholder="Email" type="email" /><br>

        <label for="last-name">Last Name</label>
        <input id="last-name" required placeholder="Last Name" type="text" /><br>

        <label for="user-name">User Name</label>
        <input id="user-name" placeholder="User Name" type="text" /><br>

        <label for="password">Password</label>
        <input id="password" required placeholder="Password" minlength="10" type="password" />
        <input type="submit" value="Create Account" />
    </form>
</body>

<lable>

- 입력필드에 레이블을 추가한다. 레이블은 사용자에게 어떤 정보를 입력해야하는지 보여준다.

- 레이블을 입력 필드와 연결시키고 싶다면 <label> 태그의 for 속성과 <input> 태그의 id 속성을 일치시켜준다.

 - label은 input과 함께 사용하며 body안에 어떤 태그에도 id를 넣을 수 있는 이유는 id는 unique identifier(고유식별자)이기 때문이다. 또 id는 element당 하나의 id만 가질 수 있다.

 

Semantic HTML

<body>
    <header>
        <h1>The AR</h1>
    </header>

    <div>
        <label for="Profile">Profile Photo</label><br>
        <input id="Profile" type="file" accept=".pdf" />
    </div>

    <main>
        <p>Hello!!</p>
        <span>Hello!!!!</span>
    </main>

    <footer>
        <a href="https://arang95.tistory.com/">방문하기</a>
    </footer>
</body>

<div> 

- 구조와 디자인을 만드는 역할로 아무런 의미가 없는 박스 태그이다. 각 태그로 의미적 요소를 나타내어 개발자나 검색 등 페이지의 구조와 콘텐츠를 명확히할 수 있다.

 

 

728x90
반응형
LIST
저작자표시 비영리 동일조건

'WEB > HTML, CSS' 카테고리의 다른 글

CSS box - (2)  (0) 2023.10.16
CSS - How to Add CSS to HTML (1)  (0) 2023.10.15
HTML - Tag, Attribute(1)  (2) 2023.10.10
CSS? - (0)  (0) 2023.10.03
HTML? - (0)  (0) 2023.09.30
'WEB/HTML, CSS' Related Articles more