집 > 기사 > 웹 프론트엔드 > HTML/CSS 텍스트 입력 상자에는 어떤 속성이 있습니까?

HTML/CSS 텍스트 입력 상자에는 어떤 속성이 있습니까?

青灯夜游원래의: 2022-09-23 14:41:224144검색

텍스트 입력 상자의 속성은 다음과 같습니다. 1. 파일 업로드를 통해 제출된 파일 유형을 지정하는 accept 2. 이미지 입력에 대한 대체 텍스트를 정의하는 alt 3. 비활성화된 상태를 정의하는 4. . 양식 제출 시 입력 제어를 처리하는 파일의 URL을 지정하는 formaction 5. 양식을 제출한 후 수신된 응답의 이름이나 키워드를 표시할 위치를 지정하는 cols; 7. 읽기 전용, 이는 읽기 전용 상태와 같습니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

HTML/CSS에는 두 가지 유형의 텍스트 입력 상자가 있습니다.

input: 한 줄 텍스트 입력 상자
textarea: 여러 줄 텍스트 입력 상자

이 두 가지 입력에 대해 이야기해 보겠습니다. 상자에서 지원되는 속성입니다.

입력 입력 상자 속성

<input> 태그는 사용자가 데이터를 입력할 수 있는 입력 필드를 지정합니다.

HTML5의 새로운 유형 속성 값의 예

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 속성은 요소의 novalidate 속성을 재정의합니다.
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 email 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

HTML/CSS 텍스트 입력 상자에는 어떤 속성이 있습니까?

number

HTML/CSS 텍스트 입력 상자에는 어떤 속성이 있습니까?

tel

전화번호를 입력하세요. Safari에서만 지원됩니다.

email
제출 시 감지 기능이 내장되어 있습니다. , @ 기호가 포함되어 있는지 감지하고 @ 문자 앞뒤에 문자가 있습니까?
range

url HTML/CSS 텍스트 입력 상자에는 어떤 속성이 있습니까? 입력한 URL은 http://로 시작해야 하며 반드시 뒤에 문자가 있으면 제출할 수 없습니다.

search
정의 검색 문자열을 입력하기 위한 텍스트 필드
날짜 제어 - 날짜
```
<input>
```

시간 제어 - 시간 HTML/CSS 텍스트 입력 상자에는 어떤 속성이 있습니까?

<input>
<input>

날짜 시간 제어 - datetime -local 2-HTML/CSS 텍스트 입력 상자에는 어떤 속성이 있습니까?

```
<input>
```

월 제어- 월 HTML/CSS 텍스트 입력 상자에는 어떤 속성이 있습니까?

```
<input>
```

주 관리-주 HTML/CSS 텍스트 입력 상자에는 어떤 속성이 있습니까?

```
<input>
```

날짜 시간 제어--datetime HTML/CSS 텍스트 입력 상자에는 어떤 속성이 있습니까?

```
<input>
```

HTML/CSS 텍스트 입력 상자에는 어떤 속성이 있습니까?

<input>

텍스트 영역 입력 상자의 속성 HTML/CSS 텍스트 입력 상자에는 어떤 속성이 있습니까?

태그는 여러 줄의 텍스트 입력 컨트롤을 정의합니다. <strong></strong>

속성

값 설명 autofocusautofocus은 페이지가 로드될 때 텍스트 영역에 자동으로 초점이 맞춰지도록 지정합니다. colsnumber텍스트 영역 내에서 표시되는 너비를 지정합니다. disableddisabled은 비활성화된 텍스트 영역을 지정합니다. formform_id텍스트 영역이 속한 하나 이상의 양식을 정의합니다. maxlengthnumber텍스트 영역에 허용되는 최대 문자 수를 지정합니다. nametext텍스트 영역의 이름을 지정합니다. placeholdertext텍스트 영역의 예상 입력 값을 설명하는 짧은 힌트를 지정합니다. readonlyreadonly은 텍스트 영역이 읽기 전용임을 지정합니다. requiredrequired 텍스트 영역이 필수/필수임을 지정합니다. rowsnumber텍스트 영역에 표시되는 행 수를 지정합니다. wrap하드 Soft

textarea文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

</body>
</html>

HTML/CSS 텍스트 입력 상자에는 어떤 속성이 있습니까?

（学习视频分享：web前端）












는 양식을 제출할 때 텍스트 영역의 텍스트가 어떻게 바뀌어야 하는지 지정합니다.

위 내용은 HTML/CSS 텍스트 입력 상자에는 어떤 속성이 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

html5 css 正则表达式 safari css3 html checkbox date 字符串 number 选择器 input http

성명：

이전 기사：마우스가 CSS를 통과할 때 표시 스타일을 숨기는 방법다음 기사：마우스가 CSS를 통과할 때 표시 스타일을 숨기는 방법