3school 知识点随笔记录(HTML输入类型)
URL
http 超文本传输协议 以 http:// 开头的普通网页。不加密。
https 安全超文本传输协议 安全网页。加密所有信息交换。
ftp 文件传输协议 用于将文件下载或上传至网
HTML 表单
form // 定义HTML表单
text // 定义常规文本输入
radio // 定义单选按钮输入(多选一)
checked // 定义单选按钮预选项
submit // 规定向何处提交表单的地址(URL)(提交页面)。
action // 定义在提交表单时执行的动作
method // 定义在提交表单时所用的HTTP方法(GET 或 POST,默认GET)
name // 规定识别表单的名称
fieldset // 定义组合表单中的相关数据,<legend>元素为<fieldset>元素定义标题
target // 规定action属性中地址的目标(默认:_self)
示例 :
<!DOCTYPE html>
<html>
<body>
<form(定义表单) action(规定提交表单的地址)="/demo/demo_form.asp">
<fieldset> // 组合表单中的数据
<legend>Personal information:</legend> // 定义标题
First name:<br>
<input type="text" name(定义名称)="firstname" value(定义框内默认内容)="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse" >
<br><br>
<input type="submit" (定义提交按钮) value="Submit">
<form>
<input type="radio" (定义单选按钮) value="hhh" checked(定义初始选择位置)>
<input type="radio" (定义单选按钮) value="xxx" >
</form>
</fieldset>
</form>
</body>
</html>
select // 定义下拉列表
option // 元素定义下拉列表中的一个选项(条目),option 元素位于 select 元素内部
示例 :
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
<select name="hhh"> // 定义下拉列表
<option value="volvo">volvo</option> // 定义列表中的一个选项
<option value="saab" selected(定义下拉框预选项)>saab</option>
<option value="fiat">fiat</option>
<option value="audi">audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
datalist // 元素为 <input> 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
input // <input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。
示例 :
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
<input list(定义位置)="browsers" name="browser">
<datalist id="browsers"> // 坐标ID定位输入框
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit"> // 定义提交按钮
</form>
</body>
</html>
输入类型
text // 定义供文本输入的单行输入字段
password // 定义密码字段
checkbox // 定义复选框,复选框允许用户在有限数量的选项中选择零个或多个选项。
button // 定义按钮
number // 定义包含数字值得输入字段,min="1" max="5" : 只能输入1-5之间
date // 定义包含日期的输入字段,日期选择器会出现输入字段中。
color // 定义包含颜色的输入字段。根据浏览器支持,颜色选择器会出现输入字段中。
range // 定义包含一定范围内的值的输入字段,输入字段能够显示为滑块控件。
month // 定义允许用户选择月份和年份,日期选择器会出现输入字段中。
week // 定义允许用户选择周和年,日期选择器会出现输入字段中。
time // 定义允许用户选择时间(无时区),时间选择器会出现输入字段中。
email // 定义包含电子邮件地址的输入字段,在提交时自动对电子邮件地址进行验证。
search // 用于搜索字段(搜索字段的表现类似常规文本字段)
tel // 用于应该包含电话号码的输入字段。
url // 用于应该包含 URL 地址的输入字段。
注释 : 输入类型都需要用“type”定义
示例:
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
name:<input type="text" name="firstname"> // 定义普通文本输入框
<br>
mima:<input type="password" name="password"> // 定义密码字段
<br>
tijiao:<input type="submit" name="submit"> // 定义提交表单数据至表单处理程序的按钮。
<br>
danxuan:<input type="radio" name="radio" value="female">Female // 定义单选按钮
<br>
fuxuan:<input type="checkbox" name="checkbox" value="Car">I have // 定义复选按钮
<br>
dianji:<input type="button" onclick="alert('Hello World!')" value="Click Me!">
cllick!</button> // 定义点击事件
<br>
shuzi:<input type="number" name="quantity" min="1" max="5"> // 定义数字输入且在1-5之间
<br>
riqi:<input type="date" name="bday"> // 定义包含日期的输入字段
<br>
yanse:<input type="color" name="favcolor" value="#ff0000"> // 包含颜色调控输入字段
<br>
shuzi:<input type="range" name="points" min="0" max="10"> // 范围内滑块控件字段
<br>
nianyue:<input type="month" name="bdaymonth"> // 允许用户选择月份和年份。
<br>
nianzhou:<input type="week" name="year_week"> // 允许用户选择周和年。
<br>
time:<input type="time" name="usr_time"> // 允许用户选择时间(无时区)。
<br>
email:<input type="email" name="email" value="123456"> // 包含电子邮件地址的输入字段。
<br>
sousuo:<input type="search" name="googlesearch"> // 用于搜索引擎字段
<br>
tel:<input type="tel" name="usrtel"> // 用于包含电话号码的输入字段。
<br>
url:<input type="url" name="homepage"> // 用于包含 URL 地址的输入字段。
<br>
<input type="submit">
</form>
</body>
</html>