input 태그

input 태그는 사용자로부터 데이터를 입력받기 위한 폼 요소를 생성하는데 사용한다. 다양한 유형의 입력을 받을 수 있고

type 속성을 사용해 입력 방식이나 데이터를 지정할 수 있다.

 

기본구조에 대해 알아보자

<input type="text">

 

 

주요 속성

• type : 입력 필드의 유형을 지정 : text,password,email
• name : 서버로 제출할 때 이 입력 요소의 이름을 지정한다.
• value : 필드의 초기값을 지정한다.
• placeholder : 필드가 비어 있을 때 표시되는 힌트 텍스트 이다.
• required : 필수 입력 필드를 지정한다.
• disabled : 입력을 비활성화 시킨다.
• readonly : 입력 필드가 읽기 전용으로 변경된다.
• maxlength : 입력 가능한 최대 글자 수 를 제한한다.

1. TEXT 필드 입력

<input type="text" name="username" placeholder="Enter your username">

2.  Password 필드 입력

<input type="password" name="password" placeholder="Enter your password">

3. Email 필드 입력

<input type="email" name="email" placeholder="Enter your email">

4. Checkbox (체크 박스)

<input type="checkbox" name="subscribe" value="newsletter"> Subscribe to newsletter

5. Radio button 버튼

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

6. 숫자 입력 필드

<input type="number" name="age" min="1" max="100">

7. 파일 업로드 필드

<input type="file" name="profile_picture">

8. Submit 버튼

<input type="submit" value="Submit">

 

폼 예시

See the Pen Untitled by 성은총 (@xxlblqtl-the-selector) on CodePen.