<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方式。
8675
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
