텍스트 입력 상자의 속성은 다음과 같습니다. 1. 파일 업로드를 통해 제출된 파일 유형을 지정하는 accept 2. 이미지 입력에 대한 대체 텍스트를 정의하는 alt 3. 비활성화된 상태를 정의하는 4. . 양식 제출 시 입력 제어를 처리하는 파일의 URL을 지정하는 formaction 5. 양식을 제출한 후 수신된 응답의 이름이나 키워드를 표시할 위치를 지정하는 cols; 7. 읽기 전용, 이는 읽기 전용 상태와 같습니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
HTML/CSS에는 두 가지 유형의 텍스트 입력 상자가 있습니다.
input: 한 줄 텍스트 입력 상자
textarea: 여러 줄 텍스트 입력 상자
이 두 가지 입력에 대해 이야기해 보겠습니다. 상자에서 지원되는 속성입니다.
입력 입력 상자 속성
<input> 태그는 사용자가 데이터를 입력할 수 있는 입력 필드를 지정합니다.
| property | value | description |
|---|---|---|
| accept | audio/* 동영상/* image/*MIME_type | 파일 업로드를 통해 제출된 파일 유형을 지정합니다. (type="file"에만 해당) |
| align | left 오른쪽 맨 위 가운데 Bottom | HTML5는 더 이상 사용되지 않으며 더 이상 사용되지 않습니다. 이미지 입력의 정렬을 지정합니다. (type="image"인 경우에만) |
| alt | text | 이미지 입력에 대한 대체 텍스트를 정의합니다. (type="image"에만 해당) |
| autocomplete | on off | autocomplete 속성은 <input> 요소 입력 필드가 자동 완성을 활성화해야 하는지 여부를 지정합니다. |
| autofocus | autofocus | 속성은 페이지가 로드될 때 <input> 요소가 자동으로 포커스를 얻도록 지정합니다. |
| checked | checked | checked 속성은 페이지가 로드될 때 미리 선택되어야 하는 <input> 요소를 지정합니다. (type="checkbox" 또는 type="radio"에만 해당) |
| disabled | disabled | disabled 속성은 비활성화해야 하는 <input> 요소를 지정합니다. |
| form | form_id | form 속성은 <input> 요소가 속하는 하나 이상의 양식을 지정합니다. |
| formaction | URL | 속성은 양식이 제출될 때 입력 컨트롤을 처리하는 파일의 URL을 지정합니다. (type="submit" 및 type="image"에만 해당) |
| formenctype | application/x-www-form-urlencoded 다중 부분/양식 데이터 text/plain | 속성은 서버에 제출할 때 양식 데이터가 인코딩되는 방법을 지정합니다(type="submit" 및 type="image"에만 적합). |
| formmethod | get post | 는 양식 데이터를 작업 URL로 보내는 HTTP 메서드를 정의합니다. (type="submit" 및 type="image"에만 적합) |
| formnovalidate | formnovalidate | formnovalidate 속성은 |
| formtarget | _blank _본인 _조상 _topframename | 은 양식 제출 후 받은 응답의 이름이나 키워드를 표시할 위치를 지정합니다. (type="submit" 및 type="image"에만 적합) |
| height | pixels | <input> 요소의 높이를 지정합니다. (type="image"에만 해당) |
| list | datalist_id | 속성은 <input> 요소에 대해 사전 정의된 옵션이 포함된 |
| max | 번호 date | 속성은 <input> 요소의 최대값을 지정합니다. |
| maxlength | number | 속성은 <input> 요소에 허용되는 최대 문자 수를 지정합니다. |
| min | 번호 date | 속성은 <input> 요소의 최소값을 지정합니다. |
| multiple | multiple | 속성은 사용자가 <input> 요소에 여러 값을 입력할 수 있음을 지정합니다. |
| name | text | name 속성은 <input> 요소의 이름을 지정합니다. |
| pattern | regexp | pattern 속성은 <input> 요소의 값을 확인하는 데 사용되는 정규식을 지정합니다. |
| placeholder | text | placeholder 속성은 입력 <input> 필드의 예상 값을 설명하는 짧은 도구 설명을 지정합니다. . |
| readonly | readonly | readonly 속성은 입력 필드가 읽기 전용임을 지정합니다. |
| required | required | 속성은 양식을 제출하기 전에 입력 필드를 채워야 함을 지정합니다. |
| size | number | size 속성은 <input> 요소의 표시 너비를 문자 수로 지정합니다. |
| src | URL | src 속성은 제출 버튼으로 표시될 이미지의 URL을 지정합니다. (만 type="image") |
| step | number | step 속성은 <input> 요소에 대한 유효한 숫자 간격을 지정합니다. |
| type | button checkbox color date datetime datetime-local file hidden image month number password radio range reset search submit tel text time url week |
type 속성은 표시할 <input> 요소의 유형을 지정합니다. |
| value | text | <input> 요소 값을 지정합니다. |
| width | pixels | width 속성은 <input> 요소의 너비를 지정합니다. (type="image"에만 해당) type 속성은 표시할 <input> 요소의 유형을 지정합니다. |
color
전화번호를 입력하세요. Safari에서만 지원됩니다.
email
제출 시 감지 기능이 내장되어 있습니다. , @ 기호가 포함되어 있는지 감지하고 @ 문자 앞뒤에 문자가 있습니까?
range
url 
search
날짜 제어 - 날짜
<input>
시간 제어 - 시간
<input> <input>
날짜 시간 제어 - datetime -local
<input>
월 제어- 월
<input>
주 관리-주
<input>
날짜 시간 제어--datetime
<input>
<input>
텍스트 영역 입력 상자의 속성
속성
| autofocus | autofocus | |
|---|---|---|
| cols | ||
| 텍스트 영역 내에서 표시되는 너비를 지정합니다. | disabled | disabled |
| form | ||
| 텍스트 영역이 속한 하나 이상의 양식을 정의합니다. | maxlength | |
| 텍스트 영역에 허용되는 최대 문자 수를 지정합니다. | name | |
| 텍스트 영역의 이름을 지정합니다. | placeholder | |
| 텍스트 영역의 예상 입력 값을 설명하는 짧은 힌트를 지정합니다. | readonly | readonly |
| required | required | |
| rows | ||
| 텍스트 영역에 표시되는 행 수를 지정합니다. | wrap | 하드 |
| 는 양식을 제출할 때 텍스트 영역의 텍스트가 어떻게 바뀌어야 하는지 지정합니다. |
위 내용은 HTML/CSS 텍스트 입력 상자에는 어떤 속성이 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
