HTML5에는 다양한 입력 상자와 버튼이 있습니다. 또한 입력 요소의 유형 속성을 설정하여 선택 목록, 멀티 라인 입력 상자 등을 지원합니다. 그리고 속성. 다음은 하나씩 소개합니다.
단일 텍스트 입력 상자유형은 입력 요소가 단일 라인 텍스트 상자이며 입력 요소의 기본 표현 인 텍스트입니다. 단일 라인 텍스트 입력 상자는 다음 속성 설정을 지원합니다.
요소 크기를 설정하십시오MaxLength 속성은 사용자가 입력 할 수있는 최대 문자 수를 설정합니다.
<form method = post action = http : // titan : 8080/form> <p> <label for = name> name : <입력 maxlenth = 10 id = name name/> </p> </p> p > <레이블에 대한 레이블 : <입력 크기 = 10 ID = 도시 이름 = 도시/> </p> <p> <레이블에 대한 = fave> 과일 : <입력 크기 = 10 maxlenth = 10 id = fave name = fave/> </label> </p> <버튼 유형 = 제출> 투표 </button> </form> 제출초기 값을 설정하고 점유 프롬프트를 점유하십시오
값 속성은 입력 상자의 기본값을 지정할 수 있습니다. 자리 표시 자 속성은 사용자에게 어떤 유형의 데이터가 입력되어야하는지 알 수 있습니다.
<form method = post action = http : // titan : 8080/form> <p> <label for = name> name : <입력 자리 표시기 = 이름 Id = 이름 이름/> </p> <p> <p> <label for = city> city : <입력 자리 표시 자 = 사는 곳 ID = 도시 이름 = city/> </p> <p> <label for = fave> fave> <입력 값 = apple id = fave name = fave/ > </label> </p> <버튼 유형 = 제출> 제출 투표 </button> </form>
크롬의 효과는 다음과 같습니다.
버튼 요소로 양식을 재설정 할 때 브라우저는 텍스트 상자의 포지셔닝 프롬프트 및 기본값을 복원합니다.
데이터 목록목록 속성은 Datalist 요소의 ID 속성 값으로 설정하여 데이터리스트 요소에 지정된 목록에서 선택할 수 있습니다. Datalist 요소는 HTML5에 새로 추가되어 사용자가 필요한 데이터를 입력 할 수 있도록 값의 배치를 제공합니다.
<form method = post action = http : // titan : 8080/form> <p> <label for = name> name : <입력 자리 표시기 = 이름 Id = 이름 이름/> </p> <p> <p> <label for = city> city : <입력 자리 표시 자 = 어디에 살고있는 곳 ID = 도시 이름 = city/> </p> <p> <label for = fave> st id = fave name = fave/> </label> < /p> <버튼 유형 = 제출> 제출 투표 </button> </form> <datalist id = fruitlist> <옵션 값 = 사과 레이블 = 사랑스러운 A pples/> <옵션 값 = 오렌지> 오렌지 </옵션> < 옵션 값 = 체리/> </datalist>
Datalist 요소의 각 옵션은 사용자가 선택할 수있는 값을 나타냅니다.
읽거나 비활성화 된 텍스트 상자를 생성합니다readonly 속성은 텍스트 상자 만 읽기 만하고 비활성화 된 속성은 편집 할 수 없음을 나타내며 모양 성능에 차이가 있음을 나타냅니다.
<form method = post action = http : // titan : 8080/form> <p> <label for = name> name : <입력 값 = adam disabled id = name name/> </p> <p> <p> <label for = City> City : <입력 값 = Boston Readonly id = City Name = City/> </p> <p> <label for = fave> fruit : <입력 값 = Apple ID = fave name = fave/> </label> </p> <버튼 유형 = 제출> 투표 제출 </button> </form>
크롬의 효과는 다음과 같습니다.
장애인 속성이있는 양식은 그 회색으로 설정되어 있습니다. 텍스트의 내용은 서버에 제출되지 않습니다. 상자이지만 외관의 영향에는 영향을 미치지 않으며 콘텐츠는 서버로 전송됩니다.
비밀번호 입력 상자유형 속성의 입력 요소는 암호를 사용하는 데 사용됩니다. 이 속성의 입력 요소는 다음 속성을 지원합니다.
1) MaxLength : 사용자가 암호 상자에 입력 할 수있는 최대 문자 수;
2) 패턴 : 정기적 인 검증 표현을 입력하는 데 사용됩니다.
3) 자리 표시 자 : 필요한 데이터 유형을 프롬프트합니다.
4) ReadOnly : 암호 상자를 읽도록 설정하십시오.
5) 필수 : 사용자는 값을 입력해야합니다. 그렇지 않으면 입력 검증을 전달할 수 없습니다.
6) 크기 : 지정된 암호 상자에 보이는 문자 수를 통해 너비를 설정합니다.
7) 값 : 초기 비밀번호 값을 설정하십시오.
<form method = post action = http : // titan : 8080/form> <p> <label for = name> name : <입력 값 = adam disabled id = name name/> </p> <p> <레이블 = 비밀번호> 비밀번호 : <입력 유형 = 비밀번호 자리 표시 자 = 최소 6 문자 = 비밀번호 이름 = 비밀번호/</p> <p> <p> <label = fave> 과일 : <입력 값 = 사과 id = fave name = fave/ </label> </p> <버튼 유형 = 제출> 투표 제출 </button> </form>
사용자가 입력 한 문자는 비밀번호 상자에*로 표시되지만 양식을 제출할 때 서버는 안전한 웹 사이트 및 애플리케이션 시스템을 수신해야합니다. 브라우저에 SSL/HTTPS를 사용하여 서버 간의 통신 콘텐츠가 암호화됩니다.
단추유형 속성은 제출, 재설정 및 버튼으로 설정되어 버튼 요소와 같은 버튼을 생성합니다.
1) 제출 : 양식을 제출하기위한 버튼을 생성, 지원 속성 : Formaction, Formencteod, Formtarget 및 FormNovalidate는 버튼 요소의 이름 속성과 동일합니다.
2) 재설정 : 고정 양식의 버튼을 생성합니다.
3) 버튼 : 작업없이 일반 버튼을 생성합니다.
3의 버튼의 설명 텍스트는 값 속성을 통해 지정됩니다.
<form method = post action = http : // titan : 8080/form> <p> <label for = name> name : <입력 값 = adam disabled id = name name/> </p> <p> <레이블 = 비밀번호> 비밀번호 : <입력 유형 = 비밀번호 자리 표시 자 = 최소 6 문자 = 비밀번호 이름 = 비밀번호/</p> <p> <p> <label = fave> 과일 : <입력 값 = 사과 id = fave name = fave/ </label> </p> <입력 유형 = 제출 값 = 제출 투표/> <입력 유형 = 재설정 값 = resype = b utton value = my button/> </form>
크롬의 효과는 다음과 같습니다.
생성 버튼과 ANPUT 요소와 버튼 요소를 사용하는 것의 차이점은 후자를 사용하여 텍스트를 포함하는 텍스트를 표시하는 데 사용할 수 있다는 것입니다. 그러나 각 브라우저는 입력 요소의 동일한 처리 방법을 가지므로 일부 이전 브라우저 (예 : IE6)는 버튼 요소를 올바르게 처리 할 수 없으므로 많은 웹 사이트가 입력 요소를 사용하는 경향이 있습니다.
제한된 입력 상자 디지털 입력 상자유형 속성의 입력 요소는 값 만 허용합니다. 지원 속성에는 다음이 포함됩니다.
1) 목록 : 텍스트 상자에 권장 값을 제공하는 데이터리스트 요소를 지정하며 그 값은 Datalist 요소의 ID 값입니다.
2) 최소 : 최소값을 설정하십시오.
3) MAX : 최대 값을 설정하십시오.
4) ReadOnly : 읽기 전용;
5) 필수 : 이는 사용자가 값을 입력해야 함을 의미합니다.
6) 단계 : 값을 위아래로 조정하는 단계;
7) 값 : 지정된 요소의 초기 값.
<form method = post action = http : // titan : 8080/form> <p> <label for = name> name : <입력 값 = adam disabled id = name name/> </p> <p> <레이블 = 비밀번호> 비밀번호 : <입력 유형 = 비밀번호 자리 표시 자 = 최소 6 문자 = 비밀번호 이름 = 비밀번호/</p> <p> <p> <label = fave> 과일 : <입력 값 = 사과 id = fave name = fave/ > </label> </p> <p> <레이블에 대한 레이블에 대한 레이블 : <입력 유형 = 숫자 단계 = 1 분 = 0 max = 100 value = 1 id = 가격 이름 = 가격/> </label> </p> <입력 유형 = 제출 값 = 제출 투표/> </form>
크롬의 효과는 다음과 같습니다.
범위 선택기유형 속성으로 범위에 입력 요소를 사용하면 사용자가 먼저 지정된 스코프 내에서 숫자 값을 선택할 수 있습니다.
<form method = post action = http : // titan : 8080/form> <p> <label for = name> name : <입력 값 = adam disabled id = name name/> </p> <p> <레이블 = 비밀번호> 비밀번호 : <입력 유형 = 비밀번호 자리 표시 자 = 최소 6 문자 = 비밀번호 이름 = 비밀번호/</p> <p> <p> <label = fave> 과일 : <입력 값 = 사과 id = fave name = fave/ </label> </p> <p> <라벨에 대한 레이블에 대한 레이블 : 해당 영역의 단위당 $> $ : 1 <입력 유형 = 범위 단계 = 1 분 = 0 max = 100 value = 1 id = 가격 이름 = 가격/100 </label> </p> <입력 유형 = 제출 값 = 제출 투표/> </form>
크롬의 효과는 다음과 같습니다.
확인란유형 속성은 확인란을 나타내는 확인란입니다.
1) 확인 : 기본적으로 선택할지 여부;
2) 필수 : 사용자가 확인란을 확인해야 함을 나타냅니다.
3) 값 : 서버에 제출 된 데이터 값을 기본값으로 설정합니다.
<form method = post action = http : // titan : 8080/form> <p> <label for = name> name : <입력 값 = adam disabled id = name name/> </p> <p> <레이블 = 비밀번호> 비밀번호 : <입력 유형 = 비밀번호 자리 표시 자 = 최소 6 문자 = 비밀번호 이름 = 비밀번호/</p> <p> <p> <label = fave> 과일 : <입력 값 = 사과 id = fave name = fave/ </label> </p> <p> <라벨에 대한 레이블 or = veggie> 당신은 채식주의 자입니까? 투표/> </form>을 제출하십시오
크롬의 효과는 다음과 같습니다.
확인란을 사용할 때 확인란이 제출 된 경우에만 확인란이 서버로 전송됩니다.
싱글 -코이스 버튼 그룹유형 속성의 입력 요소는 지원되는 속성 세트를 생성하는 데 사용될 수 있습니다. 각 라디오는 옵션을 나타내며 동일한 라디오 그룹이 동일한 이름을 사용합니다. 단일 선택 버튼 그룹은 옵션이 적은 장면에 적합합니다.
<form method = post action = http : // titan : 8080/form> <p> <label for = name> name : <입력 값 = adam disabled id = name name/> </p> <p> <레이블 = 비밀번호> 비밀번호 : <입력 유형 = 비밀번호 자리 표시 자 = 최소 6 문자 = 비밀번호 이름 = 비밀번호/> </p> <p> d> 좋아하는 과일에 대한 투표 </legend> <label for = apples> <입력 유형 = 무선 검사 값 = 사과 ID = 사과 이름 = fave/> 사과 </label> <레이블에 대한 레이블> <입력 유형 = 라디오 값 = 오렌지 ID = 오렌지 이름 = fave/> 오렌지 </레이블> <레이블에 대한 = 체리 > <입력 유형 = 무선 값 = 체리 ID = 체리 이름 = fave/> </label> </fieldset> </p> <입력 유형 = 제출 값 = 제출 투표/> </form>
크롬의 효과는 다음과 같습니다.
제한된 형식 입력 상자속성 값 이메일, 전화 및 URL은 각각 이메일 주소, 전화 번호 및 URL에 해당합니다.
1) 목록 : 텍스트 상자에 권장 값을 제공하는 데이터리스트 요소를 지정하며 그 값은 Datalist 요소의 ID 값입니다.
2) MaxLength : 최대 입력 문자 수;
3) 패턴 : 입력을 검증하기위한 정규 표현식을 지정합니다.
4) 자리 표시 자 : 필요한 데이터 유형에 프롬프트를 지정합니다.
5) ReadOnly : 텍스트 상자를 읽고 읽으십시오.
6) 필수 : 사용자가 값을 입력해야 함을 나타냅니다.
7) 크기 : 보이는 문자 수;
8) 값 : 지정된 요소의 초기 값.
이메일은 여러 속성을 지원하므로 여러 이메일 주소를 수락 할 수 있습니다.
<form method = post action = http : // titan : 8080/form> <p> <label for = name> name : <입력 값 = adam disabled id = name name/> </p> <p> <레이블 = 비밀번호> 비밀번호 : <입력 유형 = 비밀번호 자리 표시 자 = 최소 6 문자 = 비밀번호 이름 = 비밀번호/> </p> <p> <label = email = 이메일 : <입력 유형 = 이메일 [email protected] id = email name = 이메일/> </p> <p> <p> <레이블에 대한 레이블 = tel> 전화 : <입력 유형 = tel 자리 표시 자 = (xxx) -xxx- xxxx id = tel name = tel/> </ 레이블> </p> <p> <라벨에 대한 레이블> 홈페이지 : <입력 유형 = url id = url name = url/> </p> <입력 유형 = 제출 값 = 제출 투표/> </form>
크롬의 효과는 다음과 같습니다.
시간 및 날짜 입력 상자입력 날짜와 시간의 일부 유형은 다음을 포함하여 HTML5에 추가됩니다.
1) DateTime : 시간대 정보를 포함하여 세계 날짜와 시간을 얻으십시오.
2) DateTime-Local : 현지 날짜와 시간을 얻으려면 시간대 정보가 포함되지 않습니다.
3) 날짜 : 시간 및 시간대 정보없이 현지 날짜를 받으십시오.
4) 월 : 연간 및 월별 정보를 주일, 시간 및 시간대 정보없이 받으십시오.
5) 시간 : 시간을 가지십시오.
6) 주 : 현재 주를 받으십시오.
날짜 및 시간 입력 요소에서 지원하는 추가 속성은 다음과 같습니다.
1) 목록 : 텍스트 상자에 권장 값을 제공하는 데이터리스트 요소를 지정하며 그 값은 Datalist 요소의 ID 값입니다.
2) 최소 : 최소값을 설정하십시오.
3) MAX : 최대 값을 설정하십시오.
4) ReadOnly : 읽기 전용;
5) 필수 : 사용자는 값을 입력해야합니다. 그렇지 않으면 입력 검증을 전달할 수 없습니다.
6) 단계 : 값을 위아래로 조정하는 단계;
7) 값 : 지정된 요소의 초기 값.
<form method = post action = http : // titan : 8080/form> <p> <label for = name> name : <입력 값 = adam disabled id = name name/> </p> <p> <레이블 = 비밀번호> 비밀번호 : <입력 유형 = 비밀번호 자리 표시 자 = 최소 6 문자 = 비밀번호 이름 = 비밀번호/</p> <p> <p> <label = fave> 과일 : <입력 값 = 사과 id = fave name = fave/ > </label> </p> <p> <label for = lastBuy> 마지막 구매는 언제 구매 했습니까? 값 = 제출 투표/> </form>
크롬의 효과는 다음과 같습니다.
현재 날짜 및 시간 입력 상자는 대부분의 브라우저에서 잘 지원되지 않으므로 주류 JavaScript 라이브러리가 제공하는 캘린더 선택 도구를 사용하는 것이 가장 좋습니다.
색상 입력 상자유형 속성은 색상 선택기이며 색상 값은 7 자의 형식으로 표시됩니다 :#로 시작하고 다음 3 개의 16 개의 발전은 빨간색, 녹색 및 파란색의 세 가지 기본 색상의 값을 나타냅니다. 빨간색, 녹색 및 파란색의 값, 예를 들어 #FF1234와 같은 빨간색, 녹색 및 파란색의 세 가지 기본 값과 같은 값.
<form method = post action = http : // titan : 8080/form> <p> <label for = name> name : <입력 값 = adam disabled id = name name/> </p> <p> <레이블 = 비밀번호> 비밀번호 : <입력 유형 = 비밀번호 자리 표시 자 = 최소 6 문자 = 비밀번호 이름 = 비밀번호/</p> <p> <p> <label = fave> 과일 : <입력 값 = 사과 id = fave name = fave/ </label> </p> <p> <레이블에 대한 = 색상 : <입력 유형 = 색상 이름 = 색상/> </p> </p. 입력 유형 = 제출 투표/> /양식>
크롬의 효과는 다음과 같습니다.
대부분의 브라우저는이 입력 요소에 대한 특별한 지원을 제공하지 않았습니다.
숨겨진 입력 상자숨겨진 입력 요소는 양식을 제출할 때 데이터 항목을 숨기고 서버로 보낼 수 있습니다 (일반적 으로이 함수를 사용하기 위해).
<form 메소드 = post action = http : // titan : 8080/form> <입력 유형 = hidden name = recordid value = 1234/<p> <label for = name> name : <입력 값 = adam disabled = name name = name/> </label> </p> <p> <레이블에 대한 = 비밀번호> 비밀번호 : <입력 유형 = 비밀번호 자리 표시 자 = 최소 6 차 ID = 비밀번호 = 비밀번호/> </lab el> </p> < p> <p> <label for = fave> fruit : <입력 값 = 사과 id = fave name = fave/> </p> </p> <입력 유형 = 제출 값 = 제출 투표/> </form>이미지 버튼
이미지 유형 입력 요소에 의해 생성 된 버튼은 아이콘으로 표시되며 클릭 후 양식이 제출됩니다. 지원 속성에는 다음이 포함됩니다.
1) ALT : 장애인 지원 기술을 사용해야하는 사용자에게 유용한 요소 설명 텍스트를 제공합니다.
2) 형성 : 동일한 버튼 요소;
3) FormeencType : 동일한 버튼 요소;
4) Formmethod : 동일한 버튼 요소;
5) FormTarget : 동일한 버튼 요소;
6) Formnovalidate : 동일한 버튼 요소;
7) 높이 : 이미지의 높이를 픽셀로 설정합니다.
8) SRC : 표시 할 이미지의 URL을 지정합니다.
9) 너비 : 이미지의 너비를 픽셀로 설정합니다.
<form 메소드 = post action = http : // titan : 8080/form> <입력 유형 = hidden name = recordid value = 1234/<p> <label for = name> name : <입력 값 = adam disabled = name name = name/> </label> </p> <p> <레이블에 대한 = 비밀번호> 비밀번호 : <입력 유형 = 비밀번호 자리 표시 자 = 최소 6 차 ID = 비밀번호 = 비밀번호/> </lab el> </p> < p> <p> <label for = fave> fruit : <입력 값 = 사과 id = fave name = fave/> </p> </p> <입력 유형 = 이미지 src = accept.png 이름 = 제출/> < /형태 "
이미지 버튼을 클릭하여 제출 된 데이터는 클릭 위치의 좌표 정보가 포함되어 있으며 이미지의 클릭 위치에 따라 응답합니다.
파일 버튼을 업로드합니다파일 -타입 입력 요소는 파일을 업로드하는 데 사용되며 양식을 제출할 때 파일을 서버에 업로드 할 수 있습니다. 지원 속성에는 다음이 포함됩니다.
1) 수락 : 수락 유형을 지정하십시오. 마임 유형의 정의, RFC 2046 (http://tools.ies.org/html/rfc2046);
2) 다중 :이 속성을 한 번에 여러 파일을 업로드하도록 설정하십시오.
3) 필수 : 사용자는 값을 입력해야합니다.
<form method = post action = http : // titan : 8080/form enctype = multipart/form-data> <p> <label for = name> name : <input value = adam disabled id = name na = name/> </label> </p> <p> <레이블에 대한 = 비밀번호> 비밀번호 : <입력 유형 = 비밀번호 플랜트 = 최소 6 문자 = 비밀번호 이름 = 비밀번호/> </p> <p> <lab el for = fave> 과일 : <입력 값 = 사과 id = fave name = fave/> </p> <p> <입력 유형 = 파일 이름 = filedata/> </p> <입력 유형 = 제출 값 = 제출 투표/> </form >
Multipart/Form-Data를 업로드 할 수있을 때 양식 코드 유형을 업로드 할 수 있습니다. 크롬의 효과는 다음과 같습니다.
옵션 목록SELET 요소는 옵션 목록을 생성하는 데 사용되는데,이 목록은 radiiiiobutton 유형 입력 요소보다 더 작고 더 많은 옵션이있는 상황에 더 적합합니다. 이 요소에서 지원하는 속성에는 다음이 포함됩니다.
1) 이름 : 목록의 이름;
2) 비활성화 : 드롭 다운 목록을 비활성화합니다.
3) 양식 : 텍스트 영역에 속하는 하나 이상의 형태;
4) 자동 초점 : 페이지가로드 된 후 텍스트 영역이 자동으로 초점을 맞 춥니 다.
5) 필수 : 채워 져야합니다.
6) 크기 : 옵션 수는 드롭 다운 목록에서 볼 수 있습니다.
7) 다중 : 여러 옵션을 선택할 수 있습니다.
단일 드롭 -다운 목록요소 기본값은 단일 선택 드롭 -다운 목록입니다.
<form method = post action = http : // titan : 8080/form enctype = multipart/form-data> <p> <label for = name> name : <input value = adam disabled id = name na = name/> </label> </p> <p> <레이블에 대한 = 비밀번호> 비밀번호 : <입력 유형 = 비밀번호 플랜트 = 최소 6 문자 = 비밀번호 이름 = 비밀번호/> </p> <p> <lab el for = fave> 좋아하는 과일 : <선택 ID = fave name = fave> <옵션 valu = 사과 선택된 레이블 = 사과> 사과> <옵션 값 = 오렌지 = 오렌지> 오렌지 </옵션> <옵션 값 = 체리 레이블 = 체리> 체리 </옵션> <옵션 value = 배 라벨 = pears> 배스> </옵션> </select> </p> <입력 유형 = 제출 값 = 제출 투표/> m>
크롬의 효과는 다음과 같습니다.
확인란목록의 크기 속성 및 여러 속성을 설정 한 후 확인란이됩니다.
<form method = post action = http : // titan : 8080/form enctype = multipart/form-data> <p> <label for = name> name : <input value = adam disabled id = name na = name/> </label> </p> <p> <레이블에 대한 = 비밀번호> 비밀번호 : <입력 유형 = 비밀번호 플랜트 = 최소 6 문자 = 비밀번호 이름 = 비밀번호/> </p> <p> <lab el for = fave> 좋아하는 과일 : <선택 id = fave name = fave size = 5 배수> <옵션 값 값 = 사과 selectd label = 사과> 사과 </옵션> <sollite> es label = Orange> 오렌지> 옵션> <옵션 valu = 체리 레이블 = 체리> 체리> 옵션> <옵션 값 = 배 라벨 = 배 = 배 = 배 </옵션> </select> </p> <입력 유형 = 제출 값 = 제출 투표/> </form>
옵션을 클릭하면 여러 옵션을 선택하면 CTRL 키를 누릅니다. 크롬의 효과는 다음과 같습니다.
구조가있는 나열OptGroup 요소는 선택 요소의 내용에서 특정 구조를 설정하는 데 사용될 수 있습니다.
1) 라벨 : 전체 옵션 세트에 작은 제목을 제공하는 데 사용됩니다.
2) 비활성화 : 그룹의 그룹의 옵션.
<form method = post action = http : // titan : 8080/form enctype = multipart/form-data> <p> <label for = name> name : <input value = adam disabled id = name na = name/> </label> </p> <p> <레이블에 대한 = 비밀번호> 비밀번호 : <입력 유형 = 비밀번호 플랜트 = 최소 6 문자 = 비밀번호 이름 = 비밀번호/> </p> <p> <lab el for = fave> 좋아하는 과일 : <선택 ID = fave name = fave> <optGroup 레이블 = 상단 선택> <옵션 valu = 사과 선택 라벨 = 사과> 사과 </옵션> 이온 valu = 오렌지 레이블 = 오렌지 </옵션> </optGroup > <OptGroup Label = Others> <옵션 valu = 체리 레이블 = 체리> 체리> 옵션> <옵션 값 = 배 라벨 = 배 = 배 </옵션> tgroup> </select> </label> </p> < 입력 유형 = 제출 값 = 제출 투표/> </form>
크롬의 효과는 다음과 같습니다.
OptGroup 요소는 조직의 역할 만 수행하며 사용자는 옵션으로 선택할 수 없습니다.
멀티 라인 입력 상자TextArea 요소는 멀티 라인 텍스트 상자를 생성하고 사용자는 멀티 라인 텍스트를 입력 할 수 있습니다. 속성 포함 :
1) 자동 초점 : 페이지가로드 된 후 텍스트 영역이 자동으로 초점을 맞 춥니 다.
2) cols : 가시 너비, 정수;
3) 비활성화 :이 텍스트 영역을 비활성화합니다.
4) 형태 : 텍스트 영역에 속하는 하나 이상의 형태;
5) MaxLength : 텍스트 영역의 최대 문자 수;
6) 이름 : 텍스트 영역의 이름;
7) 자리 표시 자 : 텍스트 영역의 예상 값을 짧게 상기시켜줍니다.
8) ReadOnly : 텍스트 영역은 읽습니다.
9) 필수 : 텍스트 영역이 필요합니다.
10) 행 : 텍스트 영역의 가시 선 수, 정수;
11) 랩 : 텍스트 영역에서 텍스트를 변경하는 방법 : 소프트 (기본값).
<form method = post action = http : // titan : 8080/form enctype = multipart/form-data> <p> <label for = name> name : <input value = adam disabled id = name na = name/> </label> </p> <p> <레이블에 대한 = 비밀번호> 비밀번호 : <입력 유형 = 비밀번호 플랜트 = 최소 6 문자 = 비밀번호 이름 = 비밀번호/> </p> <p> <lab el for = fave> 좋아하는 과일 : <선택 ID = fave name = fave> <optGroup 레이블 = 상단 선택> <옵션 valu = 사과 선택 라벨 = 사과> 사과 </옵션> 이온 valu = 오렌지 레이블 = 오렌지 </옵션> </optGroup > <OptGroup Label = Others> <옵션 valu = 체리 레이블 = 체리> 체리> 옵션> <옵션 값 = 배 라벨 = 배 = 배 </옵션> tgroup> </select> </label> </p> < P> <TextArea cols = 20 줄 = 5 랩 = 하드 ID = 스토리 이름 = 스토리> 이것이 왜 당신의 호의인지를 알려주세요 </textarea> </p> <입력 유형 = 제출 va lue = 제출 투표/> </form >
크롬의 효과는 다음과 같습니다.
결과 표시 영역출력 요소는 계산 결과를 나타냅니다. 지원 속성에는 다음이 포함됩니다.
1) for : 출력 도메인과 관련된 하나 이상의 요소, 중간 공간에서 별도;
2) 형태 : 입력 필드의 하나 이상의 형태;
3) 이름 : 개체의 유일한 이름 (양식이 제출 될 때 사용).
<양식 onsubmit = return false onput = res.value = Quant.ValueAsnumber * price.valueAsNumber> <FieldSet> <전설> 가격 계산기 </legend> t type = number placeholder = quantity id = Quant Name = Quant/> <입력 유형 = 번호 자리 표시 자 = 가격 ID = 가격 이름 = 가격/> = <output for = Quant name name = res/> </form>
JavaScript의 시간 시스템은 간단한 계산기를 생성하는 데 사용됩니다.
위는이 기사의 모든 내용입니다.