에러 탈출 일지

[HTML] 입력 태그 속성 1. (text, password, radio, checkbox, file, textarea, select) 본문

개발/HTML & CSS

[HTML] 입력 태그 속성 1. (text, password, radio, checkbox, file, textarea, select)

뉴NEW 2022. 8. 26. 09:59

< 입력 태그 속성 >

- name: 데이터를 전달할 때 값을 얻을 수 있는 속성

- value: 값을 지정

- size: 크기, 입력할 수 있는 글자 수, 기본값 20

- maxlength: 최대 문자수를 지정, 글자수를 넘어서면 입력되지 않음

- readonly: 읽기만 가능하고, 변경불가

 

1. text 텍스트 필드

- 일반적인 텍스트를 입력할 때 사용

2. password 비밀번호

-  입력 부분을 기호로 표시함

<body>
<h1>로그인 화면</h1>
 <form action=" " method="POST">
    아이디: <input type="text" name="userId" size="30" placeholder="ID 입력"><br>
    비밀번호: <input type="password" name="pwd" size="30" maxlength="15" value="1234" readonly><br><br>
    <input type="submit" value="로그인"><input type="reset" value="입력 취소">
 </form>
</body>

3. 라디오 버튼

- 그룹평한 여러 선택 항목들 중에서 하나만 선택하도록 하는 태그

- name은 같아야 하고, value는 다른 값일 때

- chacked 속성 : 기본값으로 선택되도록 하는 속성

<body>
   <h2>라이오 버튼</h2>
   <form action="" method="POST">
   Q. 학생의 성별과 학년을 선택하시오.<br>
   성별:
   <input type="radio" name="gender" value="male" checked> 남성
   <input type="radio" name="gender" value="gemale"> 여성<br>
   학년:
   <input type="radio" name="year" value="freshman"> 1학년
   <input type="radio" name="year" value="sophomore"> 2학년
   <input type="radio" name="year" value="junior" checked> 3학년
   <input type="radio" name="year" value="senior"> 4학년<br>
   <input type="submit" value="전송">
   <input type="reset" value="입력취소">
   </form>
</body>

4. 체크박스 버튼

- 여러 선택 항목 중에서 여러 개를 선택할 수 있는 버튼

- name은 같아야 하고, value는 다를 수 있음.

<body>
    <h4>4. 체크박스 버튼</h4>
    <form action="" method="POST">
    Q. 즐겨보는 스포츠 중계 프로그램을 모두 선택하시오.<br>
    <input type="checkbox" name="spots" value="baseball"> 프로야구 중계<br>
    <input type="checkbox" name="spots" value="football"> 프로축구 중계<br>
    <input type="checkbox" name="spots" value="basketball" checked> 프로농구 중계<br>
    <input type="checkbox" name="spots" value="volleyball"> 프로배구 중계<br>
    <input type="checkbox" name="spots" value="golf" checked> 골프 중계<br><br>
    <input type="submit" value="전송">
    </form>
</body>

5. file 태그

- 파일을 선택할 수 있도록 하는 태그

<body>
    <h2>5. 파일 선택 태그</h2>
    <form action="" method="POST">
    Q. 과제 파일을 제출하시오.<br>
    이름: <input type="text" name="name"><br>
    학번: <input type="text" name="sid"><br>
    과제 파일: <input type="file" name="report"><br><br>
    <input type="submit" value="과제 제출">
    </form>
</body>

6. textarea 태그

- 여러 행에 해당하는 많은 양의 텍스트를 입력할 때 사용하는 태그

- cols: 열수, rows: 행수

<body>
    <h2>6. textarea 태그</h2>
    <form action="" method="POST"></form>
    방명록에 글을 작성해 주세요!<br>
    <textarea name="memo" cols="30" rows="3" ></textarea><br>
    <input type="submit" value="작성 완료">
</body>

7. select 태그

- 선택 박스를 펼쳐서 여러 개 항목 중에서 1개 또는 여러 개를 선택할 수 있도록 하는 태그

- selected: 기본값으로 선택되도록 함

- size: 한 번에 보여줄 항목의 개수

- multiple: 여러 개를 선택하는 선택 박스에 사용

<body>
    <h2>7. select 태그</h2>
    회원님의 국적과 여행한 국가를 선택하시오.<br>
    국적:
    <select name="country">
      <option value="France">프랑스</option>
      <option value="Republic Of Korea" selected>대한민국</option>
      <option value="USA">미국</option>
      <option value="Germany">독일</option>
      <option value="UK">영국</option>
    </lect><br><br>
    
    여행한 도시:
    <select name="city" size="5" multiple>
      <option value="">서울</option>
      <option value="">파리</option>
      <option value="">뉴욕</option>
      <option value="">런던</option>
      <option value="">헬싱키</option>
      <option value="">베를린</option>
      <option value="">로마</option>
    </select><br><br>
<input type="submit" value="데이터 전송">
</body>

 

 

저작자표시 (새창열림)

'개발 > HTML & CSS' 카테고리의 다른 글

[HTML] 선택자 : tag, id, class  (0) 2022.08.30
입력 태그 속성 2. (label, fieldset, legend, range 태그)  (0) 2022.08.29
[HTML] a 태그, form 태그, input 태그  (0) 2022.08.26
[HTML] 이미지(img) 태그  (0) 2022.08.26
[HTML] 목록 태그 - ul, ol, li, dl, dt, dd 태그  (0) 2022.08.25
'개발/HTML & CSS' Related Articles more