網(wǎng)頁設計與制作（活頁式） 課件 情景7-2 input標簽,type屬性的其他值

網(wǎng)頁設計與制作input標簽,type屬性的其他值授課教師：陳璇JavaScriptCSSHTMLHTML目錄CONTENTS12學習目標知識講解3小結學習目標01學習目標學習目標01學習input標簽學習目標02學習type屬性的其他值02知識點講解知識點講解<input/>元素是表單中最常見的元素，網(wǎng)頁中常見的單行文本框、單選按鈕、復選框等都是通過它定義的。在HTML5中，<input/>標簽擁有多種輸入類型及相關屬性。<input/>元素是表單中最常見的元素，網(wǎng)頁中常見的單行文本框、單選按鈕、復選框等都是通過它定義的。在HTML5中，<input/>標簽擁有多種輸入類型及相關屬性。<input>標簽知識點講解輸入標簽<input>

type屬性用于設置不同類型的輸入元素；

語法解釋基本語法<inputtype="type_name"name="field_name"/>

name屬性指定表單元素的名稱，服務端程序通過該名稱訪問表單元素。type屬性值type屬性值屬性值描述text設置單行文本框元素password設置密碼元素file設置文件元素hidden設置隱藏元素radio設置單選按鈕元素checkbox設置復選按鈕元素button設置普通按鈕元素submit設置提交按鈕元素reset設置重置按鈕元素image設置圖像提交按鈕元素文本框text設置單行輸入文本框，用于訪問者在其中輸入文本信息，輸入的信息將以明文顯示。作用<inputtype="text"name="field_name"maxlength="value"size="value"value="field_value"/>語法格式屬性描述name設置文本框的名稱，在服務端程序中用于獲取文本框的數(shù)據(jù)，必設屬性maxlength設置在文字域中最多可輸入的字符數(shù)，可選屬性size控制文本框的長度，單位是像素，可選屬性value設置文本框的默認值，可選屬性文本框示例姓名：<inputtype="text"size="12"maxlength="20"name="userName">文本框示例密碼框password<inputtype="password"name="field_name"maxlength="value"size="value"value="field_value">語法格式作用設置單行密碼輸入框，用于訪問者在其中輸入密碼信息，默認以"*"或"

"回顯所輸入的密碼

各個屬性的作用和文本框的一樣。密碼域示例密碼：<inputtype="password"size="12"maxlength="20"name="psw">03小結隱藏域hidden<inputtype="hidden" name="field_name" value="field_value">語法格式作用隱藏域在頁面中對用戶是不可見的，其作用是用于在頁面之間傳遞數(shù)據(jù)。<inputtype="hidden"value="nch"name="user_name">示例"name"和"value"性值必須設置表單控件：包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。表單域：相當于一個容器，用來容納所有的表單控件和提示信息。用于上傳本地文件到服務器中。文件域file作用基本語法<inputtype="file"name="field_name">文件域示例請上傳你的照片：<inputtype="file"name="photo">圖像域image<inputtype="image"name="field_name"src="image_path"width="width_value"height="height_value">作用按鈕外形以圖像表示，功能與提交按鈕一樣，具有提交表單內容的作用。語法格式表單控件：包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。表單域：相當于一個容器，用來容納所有的表單控件和提示信息。提交圖像域示例<inputtype="image"src