HTML-02-form表单
<form>:
form元素用于未用户创建HTML表单,用于向服务器传递数据。
form的attribute:
action = URL:用于规定提交表单时向何处发送数据。
method = [post、get]:用于规定发送 form-data的HTTP方式
name:规定表单名称。
target = [_blank、_self、_parent、_top、framename]:规定在何处打开 action的URL
form的常用子标签:
<button>:
用于定义一个按钮。button元素内部可以设置文本或图像,input元素不行。
autococus:页面加载时,按钮将获得焦点。布尔值
disable:禁用按钮。 布尔值
form = form_id:指定按钮所关联的表单ID
type = [button、reset、submit]:指定按钮类型。
formaction = url:覆盖form的action属性。与submit配合使用。
formmethod = [get、post]:指定覆盖form的method属性,与submit配合使用。
fromtarget = [_blank、_self、_parent、_top、framename]:覆盖form的target属性。与submit配合使用。
value = text:指定按钮的初始值。
name = name:指定按钮的名称。
<input>:
accept = mime_type:指定提交文件的类型。(文件扩展名)
alt = text:指定图像的说明文字。
autofocus :指定是否自动聚焦
disable:禁用
form = form_id:指定所属表单ID
formaction = url:指定表单提交位置,针对于 type = submit或 type = image
formmethod = [get、post]:表单提交方式。type = submit 或 type = image
fromtarget = []:
height = px
width = px
maxlength:指定用户输入的最大字符数
min:可接受的最小值
name = name
pattern : 指定输入字符串的正则表达式
placeholder = text:指定一个占位提示符
required:表明用户必须输入一个值
size:指定文本框宽度
src = url:指定要显示的图像URL
step:指定上下调节的数值步长
type = [button、checkbox、color、date、datetime-local、email、file、hidden、image、month、number、password、radio、range、reset、search、submit、tel、text、time、url、week]:指定 input的类型。
checked :默认勾选复选框。
value= text:指定输入字段的初始值
list = "datalist_id":指定datalist的ID 用来绑定输入窗口的选择列表
1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <!--meta 元素用于描述网页信息:作者、关键字、描述等--> 6 <meta charset = "UTF-8"> 10 <!--titl元素必须位于头部--> 11 <title>表单测试</title> 12 13 <link type = "text/css" rel= "stylesheet" href="index.css"> 14 <script src = "index.js" defer> </script> 15 </head> 16 17 <body> 18 <form method = "GET"> 19 <fieldset> 20 <legend>Button</legend> 21 <!--定义一个 button 标签--> 22 <button type = "button" value = "button">button</button><br/> 23 <button type = "button" autofocus>autofocus</button><br/> 24 <!--由于 button 并非一个 void标签,因此在开始与结束标签之间的内容会显示在 button内部--> 25 </fieldset> 26 27 28 <fieldset> 29 <legend>Input</legend> 30 <fieldset class = "childfieldset"> 31 <legend>type = button </legend> 32 <!--定义一个 input 标签 input标签为 void元素--> 33 <!--y由于 input为一个 void 元素, 因此表亲啊外的文本会按照代码的先后顺序显示在 input外部--> 34 <!--除 button 类型外的输入, 其他类型的 input中 value属性并不会反应在 网页的表现上--> 35 <input type = button value = "input_button" id = "input_button"><br/> 36 </fieldset> 37 38 <fieldset class = "childfieldset"> 39 <legend>color</legend> 40 <input type = "color"><br/> 41 </fieldset> 42 43 <fieldset class = "childfieldset"> 44 <legend>checkbox | radio</legend> 45 <!--checkbox为复选框,相同的名字代表为 一组复选框--> 46 <input type = "checkbox" name = "btn_chk"> beng<br/> 47 <input type = "checkbox" name = "btn_chk"> pan<br/> 48 49 <!--radio为互斥的单选框,想同的 name 会互斥选择,不同的 name 不会互斥--> 50 <input type = "radio" name = "radio" > 男<br/> 51 <input type = "radio" name = "radio" >女 <br/> 52 <input type = "radio" name = "radio2" >女博士<br/> 53 </fieldset> 54 55 <fieldset class = "childfieldset"> 56 <legend>时间</legend> 57 <!--时间的 不同类型 palceholder 用于提供说明性信息--> 58 DATE: <input type= "date"><br/> 59 DATETIME: <input type = "datetime" placeholder = "请输入日期"><br/> 60 DATETIME_LOCAL: <input type = "datetime-local" placeholder = "请输入本地日期"><br/> 61 time : <input type = "time" name = "time" placeholder = "请选择时间"> 62 </fieldset> 63 64 <fieldset class = "childfieldset"> 65 <legend>pattern</legend> 66 <!--可与 pattern 结合使用,用于判断输入数据是否合法--> 67 Email: <input type = "email" name = "email" placeholder = "Email" id = "Email"><br/> 68 Tel: <input type = "tel" name = "tel" placeholder = "电话" id = "Tel"><br/> 69 url : <input type = "url" id = "Url"><br/> 70 </fieldset> 71 72 <fieldset class = "childfieldset"> 73 <legend>杂</legend> 74 图像: <input type = "image" src = "" alt = "美女图片"><br/> 75 76 <!--文件选择,通过accept 限制文件的类型 用于限制文件上传的大小--> 77 文件: <input type = "file" accept=".jpg, .html"> <br/> 78 79 <!--range为拖动条 min与max 确定值的范围 step确定步长--> 80 range : <input type = "range" min = 1 max = 20 step = 1><br/> 81 password : <input type = "password"><br/> 82 </fieldset> 83 84 <fieldset class = "childfieldset"> 85 <legend> search </legend> 86 百度: <input type = "search" value = "https://www.baidu.com"> 87 </fieldset> 88 </fieldset> 89 </form> 90 </body> 91 </html>
<datalist>:
规定 input标签可能的列表选项。通过ID与input的 list属性绑定。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset = "utf-8"> 5 <title>Datalist test</title> 8 </head> 9 10 <body> 11 <form> 12 <label>搜索:<input list = "myDatalist" name = "datalist"></label> 13 <datalist id = "myDatalist"> 14 <option>HTML</option> 15 <option>CSS</option> 16 <option>JavaScript</option> 17 </datalist> 18 19 </form> 20 </body> 21 22 </html>
<label>:
为input元素提供说明性信息,用来绑定label标签内部说明性内容与 input元素,当鼠标点击说明性文字时,自动在绑定的 input 元素聚焦。
<select>:
用于创建单选或多选菜单。
autofocus:自动获得聚焦
required:必须
size = num:指定大小
name = name:指定名称
<option>:
value = text:指定发送到服务器的选项值。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title>select_test</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <link rel="stylesheet" type="text/css" media="screen" href="main.css"> 9 <script src="main.js"></script> 10 </head> 11 <body> 12 <select> 13 <option>HTML</option> 14 <option>JavaScript</option> 15 <option>CSS</option> 16 </select> 17 </body> 18 </html>
<textarea>:
autofocus:
cols:指定文本区域的可见宽度 字节 汉字为两个字节
rows:指定文本区域的可见行数
placeholder
readonly
required
wrap = [hard、soft、off]:指定如何处理自动换行:
soft:页面渲染中自动换行,但是换行不提交(CR + LF)
hard:渲染换行,换行(CR + LF)提交,必须同时指定cols属性
off:页面渲染中不进行换行
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title>textarea_test</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <link rel="stylesheet" type="text/css" media="screen" href="main.css"> 9 <script src="main.js"></script> 10 </head> 11 <body> 12 <textarea wrap = "off"> 13 我是一个文本框 14 </textarea> 15 </body> 16 </html>
以下为百度的表单:根据表单的属性 及内部标签的属性 name进行数据的传递,因此name的作用在与为传递的数据提供键名。而value为相关标签提供默认内容、默认值。但是当标签input为 button的一种类型时,为button提供按钮的显示值。
对应连接为 https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd=%E5%8D%9A%E5%AE%A2%E5%9B%AD。该form的默认method为GET方式。