HTML5
- 寻∝梦원래의
- 2018-08-16 14:09:267132검색
HTML5fc86e7b705049fc9d4fccc89a2e80ee3 태그의 속성은 무엇인가요? HTML5fc86e7b705049fc9d4fccc89a2e80ee3 태그의 구체적인 사용법에 대해 알아보세요. 이 문서에서는 주로 HTML5fc86e7b705049fc9d4fccc89a2e80ee3 태그의 특정 사용법과 기능을 설명하고 HTML5fc86e7b705049fc9d4fccc89a2e80ee3 태그의 일부 속성을 소개합니다.
HTML5fc86e7b705049fc9d4fccc89a2e80ee3 태그의 정의 및 사용법:
29a43a5d3682e322309b6517f67091a8 태그 정의 옵션 목록입니다. 이 요소를 입력 요소와 함께 사용하여 가능한 입력 값을 정의합니다.
datalist 및 해당 옵션은 표시되지 않으며 단지 합법적인 입력 값 목록일 뿐입니다.
데이터 목록을 바인딩하려면 입력 요소의 목록 속성을 사용하세요.
HTML5fc86e7b705049fc9d4fccc89a2e80ee3 태그 속성 및 설명:
AlternatingItemStyle은 DataList 컨트롤에 있는 대체 항목의 스타일 속성을 가져옵니다.
AlternatingItemTemplate은 DataList에서 대체 항목의 템플릿을 가져오거나 설정합니다. Attributes는 웹 컨트롤의 모든 속성 값을 가져오거나 설정합니다.
BackColor는 웹 서버 컨트롤의 배경색을 가져오거나 설정합니다.
BorderColor는 웹 컨트롤의 테두리 색상을 가져오거나 설정합니다.
BorderStyle은 웹 서버 컨트롤의 테두리 스타일을 가져오거나 설정합니다.
BorderWidth는 웹 서버 컨트롤의 테두리 너비를 가져오거나 설정합니다.
CellPadding은 셀 내용과 셀 테두리 사이의 공간을 가져오거나 설정합니다.
CellSpacing은 셀 사이의 공간 크기를 가져오거나 설정합니다.
컨트롤 목록 컨트롤의 하위 컨트롤 컬렉션입니다.
DataKeyField는 DataSource 속성으로 지정된 데이터 소스의 키 필드를 가져오거나 설정합니다.
DataKeys는 데이터 목록 컨트롤(행으로 표시됨)에 각 레코드의 키 값을 저장합니다.
DataMember는 다중 멤버 데이터 소스의 데이터 목록 컨트롤에 바인딩될 특정 데이터 멤버를 가져오거나 설정합니다.
DataSource 컨트롤의 항목을 채우는 데 사용되는 값 목록이 포함된 소스를 가져오거나 설정합니다.
EditItemIndex는 DataList 컨트롤에서 편집하기 위해 선택한 항목의 인덱스 번호를 가져오거나 설정합니다.
EditItemStyle DataList 컨트롤에서 편집하기 위해 선택한 항목의 스타일 속성을 가져옵니다.
EditItemTemplate DataList 컨트롤에서 편집하기 위해 선택한 항목에 대한 템플릿을 가져오거나 설정합니다.
Enable은 웹 서버 컨트롤이 활성화되었는지 여부를 나타내는 값을 가져오거나 설정합니다.
HeaderTemplate은 DataList 컨트롤의 헤더 부분에 대한 템플릿을 가져오거나 설정합니다.
Height 가져오기 또는 설정
HTML fc86e7b705049fc9d4fccc89a2e80ee3 태그 예:
다음은 입력 요소이며, 가능한 값은 데이터 목록에 설명되어 있습니다.
<input id="myCar" list="cars" /> <datalist id="cars"> <option value="BMW"> <option value="Ford"> <option value="Volvo"> </datalist>
HTML5 b442b5a49d7f754ee12fffc1f7092435 tag 유용성을 여러분과 공유하고 싶습니다:
최근 작업을 할 때 이메일로 무언가를 완료해야 하는데 Datalist를 발견했는데 꽤 유용하다고 생각합니다. Datalist는 입력 태그와 함께 사용해야 하며, 입력 추천, 이메일 완성 등에 사용될 수 있습니다. 관련 사용법을 아래에 간략히 기록하겠습니다.
1. HTML5fc86e7b705049fc9d4fccc89a2e80ee3 태그는 입력 추천에 사용됩니다.
<p>请输入您最喜欢的科目：</p> <input type="text" list="mylist1"> <datalist id="mylist1"> <option value="电路原理"> <option value="数字电路"> <option value="模拟电路"> <option value="计算机原理"> </datalist> </br>
데이터 목록의 ID는 입력의 목록 속성과 일치해야 합니다. 옵션 옵션이 자동으로 나타납니다. 입력 아래에는 퍼지 쿼리 기능이 있습니다. 예를 들어 텍스트 상자에 "road"를 입력하면 권장되는 내용은 회로 원리, 디지털 회로 및 아날로그 회로입니다.
2. HTML5fc86e7b705049fc9d4fccc89a2e80ee3 태그는 이메일 완성에 사용됩니다:
html 코드:
<p>请输入您的邮箱：</p> <input id="emailInput" oninput="suggestEmail()" type="text" list="mylist2"> <datalist id="mylist2"></datalist>
js 코드:
function suggestEmail(){
var email = $("#emailInput").val();
$("#mylist2").empty();
if(email.indexOf("@")>-1){
return false;
}else{
$("#mylist2").append("<option value='"+ email +"@qq.com'>"+
"<option value='"+ email +"@126.com'>"+
"<option value='"+ email +"@foxmail.com'>"+
"<option value='"+ email +"@163.com'>"+
"<option value='"+ email +"@gmail.com'>")
}
}입력 태그의 oninput 속성은 입력 상자에서 변경 사항을 감지할 수 있습니다. 콘텐츠가 변경되면 js를 시작하여 데이터 목록에 옵션을 추가합니다. 사용자가 @를 수동으로 입력하면 프롬프트가 필요하지 않습니다.
HTML 4.01과 HTML 5의 차이점:
fc86e7b705049fc9d4fccc89a2e80ee3 태그는 HTML 5의 새로운 태그입니다.
브라우저 지원:
Internet Explorer 및 Safari를 제외한 모든 주요 브라우저는 fc86e7b705049fc9d4fccc89a2e80ee3 태그를 지원합니다.
【관련 추천】
HTML5의 새로운 구조 요소는 무엇인가요? HTML5의 새로운 구조 요소 사용(권장)
HTML5의 기사 태그란 무엇인가요? HTML5에서 기사 요소는 어디에 사용됩니까?
위 내용은 HTML5