HTML学习笔记6 表单标签
来源:互联网 发布:过山车大亨 mac 编辑:程序博客网 时间:2024/05/21 23:27
写在前面
特此声明,本系列学习笔记内容来源于网络,为加深记忆所做的笔记,内容相当于转载自他处,转载来源为 极客江南的博客,以及w3school对应的表单教程
form标签1
- 表单用于搜集不同类型的用户输入
- 表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
- 格式:
<form> .form elements .</form>
常见表单元素
input标签
- form中最重要的表达标签
- 格式:
<form> <!--<input> 元素有很多形态,由不同的 type 属性所决定--> <input type="text"> <!--常见属性取值有 text,password,radio,(单选按钮,选择多个选择项之一),checkbox(复选框),button/submit,rest(重置)--></form>
- 注1:默认情况下多个radio(单选框)的单选不会互斥,若要实现多个radio的单选,需要将这多个单选radio设置相同的name属性
- 注二:可以用input的type属性取值为image来实现图片,然后设置配合js实现按钮功能
action属性
规定向何处提交表单的地址(URL)(提交页面)。
label标签
实现文字和input标签的绑定,作用是通过点击文字将光标定位到与之绑定的input标签
格式:
<form> <label for="account">账号:</label> <input type="text" id="account"></input></form>
datalist标签(了解即可,很多浏览器不支持)
- 待选列表,用于给输入框提供待选项,比如百度搜索框开始输入文字后会有自动提示。但实际上百度使用的不是datalist,而是与ajax有关的设计
- datalist格式:
<datalist id="mylist"> <option>香蕉</option> <option>苹果</option> <option>梨子</option></datalist>
- datalist使用:
- 先有一个输入框
- 设计datalist标签,并添加id属性
- 给输入框添加list属性,将datalist的id赋值给list属性
<form> 输入:<input type="text">st="mylist"> <datalist id="mylist"> <option>香蕉</option> <option>苹果</option> <option>梨子</option></datalist></form>
form标签2
select标签
- 用于定义下拉列表
- 格式:
<select> <option>数据1</option> <option>数据2</option></select>
- 注:框内只能选择内容,不能输入内容,可以在option中设置selected属性来指定默认值
- 注二:可用optiongroup标签包裹option的标签给选项分组。
- 分组格式:
<select> <optgroup label="分组名1"> <option>数据1</option> <option>数据2</option> <optgroup label="分组名2"> <option>数据12</option> <option>数据22</option> </optgroup> <optgroup label="分组名2"> <option>数据1122</option> <option>数据2211</option> </optgroup></select>
textarea标签
- 定义一个多行文本输入区
- 有默认宽高,但可通过rows和cols改变行列,另外,不论怎么设置rows和cols,输入框都可以用鼠标拖动改变大小,不过,可用css固定。
- 格式:
<textarea></textarea>
form新增标签
email标签
- 可以自动校验输入的内容是否是合格邮箱地址
url标签
- 可以自动校验输入的内容是否是合格url地址
number标签
- 输入框只能输入数字
date标签
- 通过日历选择时间
color标签
- 可以通过取色板选择颜色
阅读全文
0 0
- HTML学习笔记6 表单标签
- HTML学习笔记----表单标签
- HTML学习6-表单标签
- Html学习笔记(6)-与浏览者交互,表单标签
- HTML入门学习笔记--表单标签(5)
- Html学习笔记6:表单
- HTML&CSS基础学习笔记1.26-input标签重置表单
- HTML学习08-表单标签
- html表单学习笔记
- HTML学习笔记-表单
- <学习html>第七天笔记-表单标签(textarea控件、下拉菜单、表单域)
- 黑马程序员_学习笔记4——html标签和表单标签
- <学习html>第六天笔记-表单标签(input控件、label标签)
- spring表单标签学习笔记
- HTML入门学习笔记--多媒体标签(6)
- HTML标签-表单标签
- HTML学习笔记:表单标记
- HTML学习笔记--表单标记
- Delphi ISO collection
- 面向对象-数组工具
- 多线程+阻塞队列实现生产者-消费者模型获取队列数据问题
- 插入排序和选择排序
- web
- HTML学习笔记6 表单标签
- PHP单一入口概述与优缺点分析
- git小技巧--如何从其他分支merge个别文件或文件夹
- LeetCode46_Permutations
- jstree 请求后台数据前台处理
- Angular在IE浏览器下的配置
- Redis分布式锁----乐观锁的实现,以秒杀系统为例
- bzoj 4720/Luogu 1850(期望dp)(NOIP 2016)
- Eclipse汉化教程(详细图解)