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方式。

 

转载于:https://www.cnblogs.com/JYNNO1/p/10515658.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值