HTML表单标签

Posted 2020-07-28

表单标签

<form action="" method=""></form>

form 标签为html创建一个表单

 action属性表示表单要提交到的页面

 method属性表示表单数据提交时的传输方式  get|post

get和post的区别

1、get明文传输，不安全，post密文传输，安全

2、get最多可传输255个字符，post对传输字符去限制

文本框标签<input />

  1.普通文本框

    <input type="text" name="" />

  2.密码框

    <input type="password" name="" />

  3.单选框

    <input type="radio" name="" value="" />  注意：使用radio时name的值需要保持一致，否则不会显示单选按钮

  4.复选框

    <input type="checkbox" name="" value="" />

  5.图片域

    <input type="image" src="" width="" height="" />

注意：图片域自带提交功能，在传值时会把鼠标点击图片的x轴和y轴的坐标传给下一个页面

  6.文件域

    <input type="file" name="" />   文件上传功能

  7.普通按钮

    <input type="button" value="" />

  8.重置按钮

    <input type="reset" value="" />

  9.提交按钮

    <input type="submit" value="" />

input属性readonly="readonly" 设置只读

    disabled="disabled" 设置禁用

    checked="checked" 在单选按钮和复选框中设置默认被选中

  10.下拉菜单

    <select name="">

        <option value=""></option>

        <option value=""></option>

    </select>

   在<select>标签中selected="selected"设置被选中

 11.多行文本框

    <textarea name=""></textarea>

注意：在H4中以上必须要放在form标签中才可被传递

以下是HTML5中提供的属性

在HTML5中表单标签可以脱离form标签

在form标签中写一个ID属性，在其他标签中写属性form="form标签中的ID值"

在H5中form新增属性

    autocomplete  是否开启自动完成功能  on表示开启    off表示关闭

    novalidate="novalidate"  当属性出现时，表示表单不进行验证

新增表单属性

 带邮箱验证的文本框

    <input type="email" name="" />

输出一个颜色选择器

    <input type="color" name="" />

带数字验证的输入框

    <input type="number" max=35 min=15 />

    说明文本框内只能输入15到35之间的数字

带有日期的输入框

    <input type="date" name="" />

带有时间的输入框

    <input type="time" name="" />

带有星期的输入框

    <input type="week" name="" />

带有月份的输入框

    <input type="month" name="" />

带有可滑动滚动条的input

    <input type="range" name="" max="20" min="5" step="5" value="10">

    max  最大值   min  最小值   step  步长   value  默认值

搜索框

    <input type="search" name="ss" results="c"/>

    results="c"表示框的最前端有一个搜索图标

带有电话号码段的输入框

    <input type="tel" name="" />

验证输入内容为URL地址的输入框

    <input type="url" name="" />

datalist控件

<input type="text" list="car" />
<datalist id="car">
    <option value="宝马" />
    <option value="宝具" />
</datalist>

output输出框

<form action="" method="" oninput="res.value=r1.value*r2.value">
   <input type="number" name="r1" />
   <input type="number" name="r2" />
   <output name="res"></output>
</form>

注意：在HTML5中input新增属性placeholde 意思是提示语，当输入内容是清空
                            required设置表单内容不能为空
                            autofocus自动获得焦点
                            patten 正则表达式，输入的内容必须匹配到指定正则

web应用标签

<progress></progress>

<script>
<progress max="100" min="0" value="0" id="dd"></progress>
var s=document.getElementById("dd")

setInterval(function(){
		dd.value+=2
		if(dd.value==100){
			alert("安装完成")
						}
	},500)

</script>

显示状态标签<meter></meter>

max  最大值     min   最小值

low 被界定为低的值   high  被界定为高的值

optimum  

定义什么样的度量值是最佳的值。

如果该值高于 "high" 属性，则意味着值越高越好。

如果该值低于 "low" 属性的值，则意味着值越低越好。

value  要度量的值

HTML的全局属性

contenteditable   规定元素内容是否可编辑  true表示可编辑    false表示不可编辑

contextmenu   规定元素的上下文菜单。上下文菜单在用户点击元素时显示

draggable  规定元素是否可拖动

dropzone    规定在拖动被拖动数据时是否进行复制、移动或链接。

hidden   规定元素仍未或不再相关。

spellcheck  规定是否对元素进行拼写和语法检查

translate  规定是否应该翻译元素内容。

tabindex    按tab键光标跳转顺序