<form> <input> <select> <textarea> 태그

form enctype 속성

HTML 양식의 enctype 속성은 양식이 제출될 때 서버로 전송되는 데이터의 형식을 지정하는 데 사용된다.enctype 특성은 <form> 태그와 함께 사용되며, 폼에 파일 업로드가 포함되어 있거나 non-ASCII가 아닌 경우 설정해야 한다.

multipart/form-data: 이 값은 양식에 파일 업로드가 포함된 경우 사용.

<form action="/submit-form" method="post" enctype="multipart/form-data">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br>
  
  <label for="file">Upload a file:</label>
  <input type="file" id="file" name="file"><br><br>
  
  <input type="submit" value="Submit">
</form>

 

 

form type method

메소드 속성은 <form> 태그와 함께 사용되며 "get"과 "post"의 두 가지 가능한 값을 가질 수 있다.

"get" 메서드는 기본 메서드이며 서버에서 데이터를 검색하는 데 사용된다. "get" 메서드를 사용하여 양식을 제출하면 데이터가 쿼리 매개 변수로 URL에 추가되고 데이터가 URL에 표시된다. 

post" 방법을 사용하여 양식을 제출할 때, 데이터는 HTTP 요청의 본문으로 전송되고 URL에는 표시되지 않는다.양식 및 온라인 주문과 같이 정보를 제출하는 데 사용되는 양식에 가장 일반적으로 사용된다.

<form action="/submit-form" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br>
  
  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br><br>
  
  <input type="submit" value="Submit">
</form>

이 예에서 <form> 태그는 메서드 속성이 "post"로 설정되어 있으며, 이는 양식이 제출될 때 양식 데이터가 HTTP 요청의 본문으로 전송됨을 의미한다. 양식에는 이름에 대한 텍스트 입력 필드, 전자 메일 필드 및 암호 필드도 포함된다.

URL에서 데이터를 볼 수 없으므로 "post" 메서드가 "get" 메서드보다 더 안전하므로 변조에 덜 취약하다.

 

form  하위 요소 : input, select, textarea

<form>
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>​

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
</form>

<form> 요소는 HTML 양식을 만드는 데 사용되며, 사용자가 데이터를 입력하여 웹 서버에 제출하여 처리할 수 있다. 

 

다음은 <form> 요소 내에서 사용할 수 있는 몇 가지 일반적인 폼 요소입니다:

<input>: 텍스트 필드, 확인란, 라디오 단추 및 제출 단추와 같은 다양한 유형의 양식 컨트롤을 만드는 데 사용
<textarea>: 다중 줄 텍스트 입력 필드를 만드는 데 사용
<select> : 사용자가 선택할 수 있는 옵션의 드롭다운 목록을 만드는 데 사용
 <option> : <select> 박스내에서 개별 옵션을 생성하는 데 사용
<label>: 접근성과 사용성을 향상시킬 수 있는 폼 컨트롤의 레이블을 만드는 데 사용
<button>: 양식 내에서 클릭 가능한 단추를 만드는 데 사용

 

입력양식 유형

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

 

input 박스

HTML의 <input> 태그는 양식에 다양한 유형의 입력 필드를 만드는 데 사용된니다.
<input> 태그의 가장 중요한 속성은 입력 필드의 유형을 지정하는 type 속성입니다. 텍스트, 암호, 확인란, 라디오, 제출 등과 같이 <input> 태그로 만들 수 있는 입력 필드에는 여러 유형이 있다.

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
</form>

이 예에서 <input> 태그는 유형 속성이 "text"로 설정된 텍스트 입력 필드를 만드는 데 사용된다. id 및 name 속성은 각각 입력 필드에 고유한 식별자와 이름을 지정하는 데 사용된다.

name 속성을 사용하여 서버측으로 전송할 때 해당 이름으로 값이 매칭되어 전송된다.


다음은 <input> 태그를 사용하여 라디오 버튼을 만드는 방법의 예

<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label>
  
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label>
</form>

이 예에서 <input> 태그는 각각 고유한 ID, 이름 및 값 속성을 가진 두 개의 라디오 버튼을 만드는 데 사용된다. 이름 속성은 두 버튼 모두에 대해 "성별"로 설정되어 있으며, 이는 단일 라디오 버튼 집합으로 함께 그룹화되고 사용자는 이 중 하나만 선택할 수 있음을 의미한다.

input 박스 유형

password

암호등 감추어야 하는 텍스트를 입력할 때 사용하는 양식 유형

<form>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password">
</form>

이 예에서 <input> 요소는 암호로 설정된 유형 속성과 자바스크립트나 CSS에서 입력 필드를 참조하는 데 사용할 수 있는 id와 name 속성을 가지고 있다. 또한 관련된 <label> 요소를 가지고 있어 입력 필드에 대한 텍스트 설명을 제공하여 접근성과 사용성을 향상시킨다.

readonly Attribute

readonly 특성은 입력 필드가 읽기 전용임을 지정
readonly 입력 필드는 수정할 수 없지만, 사용자는 입력 필드를 탭하고 강조 표시하고 텍스트를 복사할 수 있다.
양식 제출 시 readonly입력 필드 값이 전송된다.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" readonly><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

 

disabled Attribute

input disabled 특성은 입력 필드를 비활성화한다.
비활성화된 입력 필드는 사용할 수 없으며 클릭할 수 없다.
비활성화된 입력 필드의 값은 양식을 제출할 때 전송되지 않는다.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" disabled><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

 

size Attribute

입력 크기 특성은 입력 필드의 표시 가능한 너비(문자)를 지정한다. 보통은 스타일속성으로 제어하여 중요하지 않다.
크기의 기본값은 20이다.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" size="4">
</form>

 

maxlength Attribute

입력 maxlength 특성은 입력 필드에 허용되는 최대 문자 수를 지정한다.

참고: 최대 길이가 설정된 경우 입력 필드는 지정된 문자 수를 초과할 수 없습니다. 그러나 이 속성은 피드백을 제공하지 않습니다. 따라서 사용자에게 경고하려면 JavaScript 코드를 작성해야 합니다.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>

 

min and max Attributes

입력 최소값과 최대값 속성은 입력 필드의 최소값과 최대값을 지정한다.
최소 및 최대 속성은 숫자, 범위, 날짜, datetime-local, 월, 시간 및 주 입력 유형으로 작동한다.
max 속성과 min 속성을 함께 사용하여 입력값의 범위를 만든다.

<form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

 

file upload field 

<form>
  <label for="files">Select files:</label>
  <input type="file" id="files" name="files" multiple>
</form>

 

pattern Attribute

입력 패턴 특성은 양식을 제출할 때 입력 필드의 값을 확인하는 정규식을 지정하여야 한다.
패턴 특성은 텍스트, 날짜, 검색, URL, 전화, 전자 메일 및 암호와 같은 입력 유형에서 작동한다.

세 개의 문자(숫자 또는 특수 문자 없음)만 포함할 수 있는 입력 필드:

<form>
  <label for="country_code">Country code:</label>
  <input type="text" id="country_code" name="country_code"
  pattern="[A-Za-z]{3}" title="Three letter country code">
</form>

 

placeholder Attribute

입력 자리 표시자 특성은 입력 필드의 예상 값(샘플 값 또는 예상 형식에 대한 간단한 설명)을 설명하는 짧은 힌트를 지정한다.

<form>
  <label for="phone">Enter a phone number:</label>
  <input type="tel" id="phone" name="phone"
  placeholder="123-45-678"
  pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

 

required Attribute

입력 필수 특성은 양식을 제출하기 전에 입력 필드를 입력해야 함을 지정한다.

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
</form>

 

step Attribute

입력 단계 속성은 입력 필드에 대한 올바른 숫자 간격을 지정한다.
예: 단계="3"인 경우 법적 숫자는 -3, 0, 3, 6 등이 될 수 있습니다.

<form>
  <label for="points">Points:</label>
  <input type="number" id="points" name="points" step="3">
</form>

 

autofocus Attribute

입력 자동 포커스 특성은 페이지가 로드될 때 입력 필드가 자동으로 포커스를 가져오도록 지정한다.
페이지가 로드될 때 "이름" 입력 필드가 자동으로 포커스를 받는 예

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" autofocus><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

image버튼 

입력 높이 및 너비 특성은 <입력 유형="이미지"> 요소의 높이 및 너비를 지정하고 버튼으로 주로 사용하나 스타일을 사용하여 최근 사용빈도 적음.

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

 

selectbox 

HTML의 <select> 태그는 사용자가 선택할 수 있는 옵션의 드롭다운 목록을 만드는 데 사용된다. <select> 태그는 일반적으로 옵션 목록을 생성하기 위해 <option> 태그와 함께 사용된다. selected를 사용하여 기본 선택옵션을 지정할 수 있다.

<form>
  <label for="color">Select a color:</label>
  <select id="color" name="color">
    <option value="red">Red</option>
    <option value="green" selected>Green</option>
    <option value="blue">Blue</option>
  </select>
</form>

 

checkbox

사용자가 선택하거나 선택 취소할 수 있는 확인란을 만드는 데 사용된다.  checked를 사용하여 기본 체크상태를 지정할 수 있다.

<form>
  <input type="checkbox" id="checkbox1" name="checkbox1" value="option1">
  <label for="checkbox1">Option 1</label>
  
  <input type="checkbox" id="checkbox2" name="checkbox2" value="option2" checked>
  <label for="checkbox2">Option 2</label>
  
  <input type="checkbox" id="checkbox3" name="checkbox3" value="option3">
  <label for="checkbox3">Option 3</label>
</form>

 

textarea 태그

텍스트에 대한 다중 줄 입력 필드를 만드는 데 사용되며  행과 열의 수, 비활성화 여부 또는 읽기 전용 여부와 같은 속성을 설정하는 데 사용할 수 있는 몇 가지 속성이 있다.

<form>
  <label for="message">Message:</label>
  <textarea id="message" rows="5" cols="30"></textarea>
  <input type="submit" value="Send">
</form>

이 예에서, <text area> 요소는 <label for="label">와 연관된 "label"의 id가 주어지며, 5개의 행과 30개의 열이 있다.

값 속성을 사용하여 텍스트 영역에 값을 추가할 수도 있습니다.

<textarea id="message" rows="5" cols="30" value="Enter your message"></textarea>

이렇게 하면 페이지가 로드될 때 "메시지 입력" 텍스트가 텍스트 영역 안에 표시된다.

또한 최대 길이 및 최소 길이 특성을 사용하여 사용자가 텍스트 영역에 입력할 수 있는 최대 및 최소 문자 수를 지정할 수 있다.

<textarea id="message" rows="5" cols="30" maxlength="500" minlength="50"></textarea>

이렇게 하면 사용자는 500자 이상을 입력할 수 없으며 50자 이상을 입력할 때까지 양식을 제출할 수 없다.