3. HTML Input

1. HTML FORM

HTML <form> 태그를 사용하면 웹 페이지에서 사용자로부터 데이터를 입력받을 수 있으며, 이 데이터를 서버로 전송할 수 있다.

<form action="입력 데이터를 처리할 페이지 주소" method="입력 데이터를 서버에 전달할 방식">
  <!-- 입력 요소들이 여기에 들어갑니다. -->
</form>

 

1-1. <form> 태그의 주요 속성 

 - action : 입력된 데이터를 처리할 서버 페이지의 URL을 지정한다. 이 URL은 데이터를 전송할 곳을 가리킨다.

- method : 입력된 데이터를 서버에 전달하는 방식을 지정한다. 

   * GET : 입력된 데이터를 URL에 포함하여 서버에 전송한다. 주로 데이터 양이 적거나 데이터가 검색 쿼리와 관련된 경우 사용된다.

   * POST : 입력된 데이터를 별도로 첨부하여 서버에 전송한다. 주로 데이터 양이 많거나 보안이 필요한 경우에 사용한다.

<form action="process_data.php" method="POST">
  <label for="name">이름:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">이메일:</label>
  <input type="email" id="email" name="email"><br><br>

  <input type="submit" value="제출">
</form>

사용자로부터 이름과 이메일 주소를 입력받고, "제출" 버튼을 클릭하면 정보를 process_data.php 라는 서버 페이지로 POST 방식으로 전송한다.

 

2. HTML Input

1.  텍스트 입력 (Text)	1. 색상 설정 (Color)
2. 패스워드 입력 (Password)	2. 날짜 입력 (Data)
3. 라디오 버튼 (Radio)	3. 시간 입력 (Time)
4. 체크 박스 (Checkbox)	4. 날짜 & 시간 입력 (Datetime-Local)
5. 파일 선택 (File)	5. 연도 & 월 입력 (Month)
6. 텍스트 박스 (Textarea)	6.  연 & 주 입력 (Week)
7. 선택 입력 (Select)	7. 숫자 입력 (Number)
8. 버튼 (button)	8. 범위 지정 (Range)
9. 전송 (Submit)	9. 전화번호 입력 (Tel)
10. 필드셋 (Fieldset)	10. 이메일 입력 (Email)
	11. URL 주소 입력 (URL)
	12. 검색어 입력 (Search)

 

[1]. 텍스트 입력 (Text)

 - type = "text" : 사용자로부터 짧은 텍스트 입력을 받는 곳에 사용된다.

 - name : 서버로 전송될 때 데이터의 이름을 지정한다.

 - placeholder : 입력 필드에 텍스트를 미리 표시하여 사용자에게 어떤 정보를 입력해야 하는지 안내한다.

<form action="#" method="#">
    아이디를 입력해주세요:<br>    
    <input type="text" name="id" placeholder="아이디를 입력하세요">
</form>

[2]. 패스워드 입력 (Password)

 - type = "password" : 사용자로부터 비밀번호를 입력을 받는 곳에 사용된다.

 - name : 서버로 전송될 때 데이터의 이름을 지정한다.

<form action="#" method="#">
    비밀번호를 입력해주세요:<br>   
    <input type="password" name="pwd">
</form>

[3]. 라디오 버튼 (Radio)

 - type = "radio" : 여러 옵션 중 하나를 선택할 때 사용된다.

 - name : 여러 라디오 버튼을 그룹화하기 위해 동일한 이름을 사용한다.

 - value : 선택한 옵션의 값을 지정한다.

 - checked : 초기에 선택되어 있을지 여부를 나타낸다.

<form action="#" method="#">
    성별를 입력해주세요:<br> 
    <input type="radio" name="gender" value="m" checked>남자<br>
    <input type="radio" name="gender" value="w">여자<br>
</form>

[4]. 체크 박스 (Check box)

 - type = "checkbox" : 여러 옵션을 독립적으로 선택할 때 사용된다.

 - name : 여러 체크 박스를 그룹화하기 위해 동일한 이름을 사용한다.

 - value : 선택한 옵션의 값을 지정한다.

 - checked : 초기에 선택되어 있을지 여부를 나타낸다.

 - disabled : 해당 옵션을 사용자가 선택할 수 없게 한다.

<form action="#" method="#">
    듣고 싶은 과목를 입력해주세요:<br>   
    <input type="checkbox" name="subject" value="C" checked>C언어<br>
    <input type="checkbox" name="subject" value="JAVA">자바<br>
    <input type="checkbox" name="subject" value="HTML">HTML<br>
    <input type="checkbox" name="subject" value="CSS">CSS<br>
    <input type="checkbox" name="subject" value="python" disabled>Python<br>
</form>

[5]. 파일 선택 (File)

 - type = "file" : 사용자로부터 파일을 업로드할 때 사용된다.

 - name : 서버로 업로드한 파일의 데이터를 전송할 때 사용한다.

 - accept : 선택한 옵션의 값을 지정한다.

<form action="#" method="#">
    업로드 할 파일을 입력해주세요:<br>   
    <input type="file" name="upload" accept="video/*">
</form>

[6]. 텍스트 박스 (Textarea)

 - <textarea> : 여러 줄의 텍스트를 입력받을 때 사용한다.

 - name : 서버로 전송될 때 데이터의 이름을 지정한다.

 - rows : 텍스트 영역의 행 수를 지정한다.

 - cols : 텍스트 영역의 열 수를 지정한다.

<form action="#" method="#">
    Memo:<br>   
    <textarea name="memo" rows="10" cols="30"></textarea>
</form>

[7]. 선택 입력 (Select)

 - <select> : 드롭다운 메뉴를 생성하여 하나의 옵션을 선택할 때 사용된다.

 - name : 서버로 전송될 때 데이터의 이름을 지정한다.

 - size : 화면에 표시될 옵션의 수를 지정한다.

 - <option> : 드롭 다운 메뉴의 각 옵션을 정의한다.

<form action="#" method="#">
    <select name="subject" size="3">
        <option value="C">C언어</option>
        <option value="JAVA">JAVA</option>
        <option value="HTML" selected>HTML</option>
        <option value="CSS">CSS</option>
    </select>
</form>

[8]. 버튼 (Button)

 - type="button" : 사용자가 클릭할 수 있는 버튼을 생성한다.

 - name : 서버로 전송될 때 데이터의 이름을 지정한다.

 - value : 버튼의 텍스트 라벨을 지정한다.

<form action="#" method="#">
    <input type="button" name="btn" value="버튼">
</form>

[9]. 전송 버튼 (Submit)

 - type="Subimit" : 양식 데이터를 서버로 제출하는 버튼을 생성한다.

 - name : 서버로 전송될 때 데이터의 이름을 지정한다.

 - value : 버튼의 텍스트 라벨을 지정한다.

<form action="#" method="#">
    <input type="submit" name="submit" value="전송">
</form>

 

[10]. 필드셋 (Fieldset)

 - <fieldset> : 여러 입력 요소를 그룹화하고 범례를 추가하는 데 사용된다.

 - <legend> : 범례를 정의하고 그룹에 대한 설명을 제공한다.

<form action="#" method="#">
    <fieldset>
        <legend>회원가입</legend>
        아이디: <input type="text" name="id"><br><br>
        비밀번호:<input type="password" name="pwd">
    </fieldset>
</form>

 

---

[1]. 색상 설정 (Color)

 사용자에게 색상 선택을 가능하게 한다. 사용자가 색상을 선택하면 해당 색상의 코드가 입력 필드에 표시된다.

<label for="colorPicker">색상 선택:</label>
<input type="color" id="colorPicker" name="color">

 

[2]. 날짜 입력 (Date)

사용자에게 달력 형식으로 날짜를 입력할 수 있는 필드를 제공한다.

<label for="datePicker">날짜 선택:</label>
<input type="date" id="datePicker" name="date">

 

[3]. 시간 입력 (Time)

시간을 입력할 수 있는 필드를 제공하며, 사용자는 시간을 시:분 형식으로 입력할 수 있다.

<label for="timePicker">시간 선택:</label>
<input type="time" id="timePicker" name="time">

 

[4]. 날짜 & 시간 입력 (Datetime-Local)

날짜와 시간을 모두 입력할 수 있는 필드로, 일반적으로 날짜와 시간을 혼합한 형식으로 사용된다.

<label for="datetimePicker">날짜와 시간 선택:</label>
<input type="datetime-local" id="datetimePicker" name="datetime">

 

[5]. 연도 & 월 입력 (Month)

연도와 월을 입력할 수 있는 필드를 제공한다. 사용자는 연도와 월을 선택할 수 있다.

<label for="monthPicker">연도와 월 선택:</label>
<input type="month" id="monthPicker" name="month">

 

[6]. 연도 & 주 입력 (Week)

연도와 주를 입력할 수 있는 필드를 제공한다. 사용자는 연도와 주를 선택할 수 있다.

<label for="weekPicker">연도와 주 선택:</label>
<input type="week" id="weekPicker" name="week">

 

[7]. 숫자 입력 (Number)

숫자 값을 입력할 수 있는 필드로, 일반적으로 숫자 데이터를 수집할 때 사용된다.

 - min : 입력 가능한 최솟값을 설정한다.

 - max : 입력 가능한 최댓값을 설정한다.

 - step : 값의 증가 또는 감소 단위를 설정한다.

 - value : 초기값을 설정한다.

<label for="numberInput">숫자 입력:</label>
<input type="number" id="numberInput" name="number" min="1" max="100" step="1" value="50">

 

[8]. 범위 지정 (Range)

사용자에게 범위를 선택하도록 허용하며, 일반적으로 슬라이더 형식으로 표시된다.

 - min : 입력 가능한 최솟값을 설정한다.

 - max : 입력 가능한 최댓값을 설정한다.

 - step : 값의 증가 또는 감소 단위를 설정한다.

 - value : 초기값을 설정한다.

<label for="rangeInput">범위 선택:</label>
<input type="range" id="rangeInput" name="range" min="0" max="100" step="5" value="50">

 

[9]. 전화번호 입력 (Tel)

전화번호 형식의 입력을 허용하며, 휴대전화나 전화번호 수집에 사용된다.

 - pattern : 입력값의 패턴을 정규식으로 지정하여 형식을 제한할 수 있다.

 - placeholder : 입력 필드에 표시되는 예시나 문구를 설정한다.

<label for="telInput">전화번호 입력:</label>
<input type="tel" id="telInput" name="tel" pattern="[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}" placeholder="123-456-7890">

 

[10]. 이메일 입력 (Email)

이메일 주소를 입력받을 수 있는 필드로, 이메일 주소의 형식을 검증하는 데 사용된다.

 - placeholder : 입력 필드에 표시되는 예시나 문구를 설정한다.

<label for="emailInput">이메일 입력:</label>
<input type="email" id="emailInput" name="email" placeholder="example@email.com">

 

[11]. URL 주소 입력 (URL)

웹 사이트 URL 주소를 입력받을 수 있는 필드로, 올바른 URL 형식을 준수하는지 확인할 때 사용한다.

 - placeholder : 입력 필드에 표시되는 예시나 문구를 설정한다.

<label for="urlInput">URL 주소 입력:</label>
<input type="url" id="urlInput" name="url" placeholder="<http://www.example.com>">

 

[12]. 검색어 입력 (Search)

검색어를 입력받을 수 있는 필드로, 일반적으로 검색 기능을 제공하는 웹 페이지에서 사용된다.

 - placeholder : 입력 필드에 표시되는 예시나 문구를 설정한다.

<label for="searchInput">검색어 입력:</label>
<input type="search" id="searchInput" name="search" placeholder="검색어를 입력하세요">

---

 

3. HTML Input 속성

1. value	1. autocomplete	1. width & height
2. readonly	2. autofocus	2. min & max
3. disabled	3. form	3. multiple
4. maxlength	4. formaction	4. placeholder
5. size	5. formmethod	5. required
	6. formtarget	6. step

 

[1] value 속성

value 속성은 입력 필드의 초기값을 설정한다. 아래 예시는 "대한민국"이 국적 입력 필드의 초기값으로 설정된다.

<form action="#" method="#">
  이름: <input type="text" name="name"><br>
  국적: <input type="text" name="country" value="대한민국">
</form>

 

[2] readonly 속성

readonly 속성은 사용자가 필드를 수정할 수 없고 읽기 전용으로만 표시된다. 값이 서버로 전송된다.

<form action="#" method="#">
  이름: <input type="text" name="name"><br>
  국적: <input type="text" name="country" value="대한민국" readonly>
</form>

 

[3] disabled 속성

disabled 속성은 사용자가 필드를 수정하거나 클릭할 수 없게 만든다. 값이 서버로 전송되지 않는다.

<form action="#" method="#">
  이름: <input type="text" name="name"><br>
  국적: <input type="text" name="country" value="대한민국" disabled>
</form>

 

[4] maxlength 속성

maxlength 속성은 사용자가 입력할 수 있는 텍스트의 최대 길이를 설정한다. 아래 예시는 필드에 다섯 글자까지만 입력할 수 있다.

<form action="#" method="#">
  이름: <input type="text" name="name" maxlength="5">(다섯글자까지만 가능합니다)<br>
  국적: <input type="text" name="country" value="대한민국" readonly>
</form>

 

[5] size 속성

size 속성은 입력 필드의 가로 크기를 설정한다. 아래 예시는 이름 필드가 30글자를 표시할 수 있는 크기로 설정되어 있다.

<form action="#" method="#">
  이름: <input type="text" name="name" size="30"><br>
  국적: <input type="text" name="country" value="대한민국" readonly>
</form>

 

[6] autocomplete 속성

autocomplete 속성은 사용자가 입력한 데이터를 저장하는 기능을 제어한다. on으로 설정하면 브라우저가 사용자가 입력한 데이터를 저장하고, off로 설정하면 저장하지 않는다.

<form action="#" method="#" autocomplete="on">
  이름: <input type="text" name="name"> (데이터를 입력하고 전송버튼을 누른 뒤 새로고침하면 데이터를 저장합니다.)<br>
  나이: <input type="number" name="age" min="1" max="100"><br>
  주소: <input type="text" name="addr" autocomplete="off"><br>
  <input type="submit" value="전송">
</form>

 

[7] autofocus 속성

autofocus 속성은 웹 페이지가 열릴 때 해당 입력 필드에 자동으로 커서를 위치시킨다.

<form action="#" method="#">
  아이디:<input type="text" name="id" autofocus><br>
  비밀번호:<input type="password" name="pwd">
</form>

 

[8] form 속성

form 속성은 <input> 요소가 속한 <form> 요소를 지정한다. 위치에 상관없이 연결된다.

<form action="#" method="#" id="login">
  아이디:<input type="text" name="id"><br>
</form>
비밀번호:<input type="password" name="pwd" form="login">

 

[9] formaction 속성

formaction 속성은 해당 버튼을 클릭했을 때 데이터를 전송할 페이지의 URL을 지정한다. submit 타입 및 image 타입에서 사용된다.

<form action="Alpha_test.php" method="#">
  아이디:<input type="text" name="id"><br>
  비밀번호:<input type="password" name="pwd"><br>
  <input type="submit" value="전송">
  <input type="submit" value="베타테스트 전송" formaction="Beta_test.php">
</form>

 

[10] formmethod 속성

formmethod 속성은 데이터를 전송할 방식을 설정한다. submit 타입 및 image 타입에서 사용된다.

<form action="Alpha_test.php" method="get">
  아이디:<input type="text" name="id"><br>
  비밀번호:<input type="password" name="pwd"><br>
  <input type="submit" value="GET방식 전송">
  <input type="submit" value="POST방식 전송" formmethod="POST">
</form>

 

[11] formtarget 속성

formtarget 속성은 결과 페이지를 어디에 열 것인지 지정한다. submit 타입 및 image 타입에서도 사용된다.

<form action="#" method="#">
  인증번호를 입력해주세요: <input type="text" name="id"><br>
  <input type="submit" value="전송">
  <input type="submit" value="새창에서 열기" formtarget="_blank">
</form>

 

[12] width & height 속성

이미지 타입의 <input> 요소에 사용되며, 이미지의 너비와 높이를 설정한다.

<form action="#" method="#">
  <input type="image" src="이미지_주소" width="26" height="26" alt="HTML logo">
</form>

 

[13] min & max 속성

입력 가능한 최소 및 최대 값의 범위를 설정한다. number, range, date, time, datetime-local, month, week 타입에서 사용된다.

<form action="#" method="#">
  날짜를 선택해주세요:<br>
  <input type="date" name="date" min="2000-01-01" max="2020-12-31">
</form>

 

[14] multiple 속성

파일을 여러 개 선택할 수 있게 한다. email 및 file 타입에서 사용된다.

<form action="#" method="#">
  <input type="file" name="upload" multiple><br>
</form>

 

[15] placerholder 속성

입력 필드에 힌트를 제공하며, 사용자가 입력하면 사라진다.

<form action="#" method="#">
  아이디:<input type="text" name="id" placeholder="아이디를 입력하십시오"><br>
  비밀번호:<input type="password" name="pwd" placeholder="비밀번호를 입력하십시오">
</form>

 

[16] required 속성

필수 입력 필드로 만든다.

<form action="#" method="#">
  주소 : <input type="text" name="addr" placeholder="주소는 반드시 입력해야합니다." required>
</form>

 

[17] step 속성

숫자의 간격을 설정한다. number, range, date, time, datetime-local, month, week 타입에서 사용된다.

<form action="#" method="#">
  짝수 : <input type="number" name="even" min="0" max="20" step="2">
</form>