WEB前端网页设计 HTML CSS 网页设计参数 - 【表单】

一个完整的表单由 表单控件、提示信息和表单域 三个部分组成

表单域：容器

表单控件：

创建表单<from>标签

<from>标记被用于定义表单域，即创建一个表单

基本语法	<from  action="url地址"  method="提交方式"  name="表单名称"> 各种表单控件 </from> #action可以是路径也可以是邮箱地址 #method有两种：get和post； get表示提交的数据只显示在浏览器的地址栏，保密性差，有数据量的限制；post保密性好，无限制数据量。

autocomplete属性：实现保存历史记录

表单有自动完成功能	on
表单无自动完成功能	off

文本框	<input type="text" name="" id="" value="123" autocomplete="on" />
密码框	<input type="password" name="" id="" value="123" autocomplete="on" />
提交按钮	<input  type="submit"  value="提交按钮">
该属性表示该控件必须输入值， 否则无法成功提交表单	required
单行文本框	type=“text”
最大输入字符	maxlegth=“6”
文本框字符容量	size=20
设置默认内容，可手动删除 设置默认文本，但不能删除	value=“默认内容” placeholder=“文本”
单选按钮	type=“radio” name=“需一样”
默认选中状态	checked=checked
复选框	type=“checkbox”
普通按钮	type=“button”   value=“普通按钮”
提交按钮	type=“submit”   value=“提交按钮”
重置按钮	type=“reset”  value=“重置按钮”
点击按钮弹出对话框	οnclick=“alert（“文本”）”
图像域	type=“image”  src=“图片路径”  width=“宽度”   height=“高度”
隐藏域	type=“hidden”
邮件、邮箱	type=“email”
提取url网址域名	type=“url”    例：http：//www.baidu.com
颜色选择器	type="color"
数值域	type="number"   min="-10"  max="10"   step="2" 最小值：min   最大值：max   步长：step
数值域滑动条	type="range"   min="-10"  max="10"   step="2"
日期选择器	type="date"    date 日、月、年 month 月、年 week  周、年 time  时、分 datetime  时、分、日、月、年（UTC世界时间） datetime-local  时、分、日、月、年（本地时间）
搜索框	type="search"
点击提示文本也可选中选项	1、标签：<label>…</label> 2、<label   for="标记">提示文本</label> <input=""……id="标记" >m
占位符	placeholder=“文本”     ##设置默认文本，但不能删除
文件域（多行文本框）	<textarea name="" rows="" cols="">内容</textarea> rows属性设置文本区的可见行数，即文本域高度 cols属性设置文本区内的可见列数，即文本域宽度 wrap属性文本区的换行模式，属性可选：soft不换行、hard 换行

1.增强鼠标的可用性

2.自动将焦点转移到与该标注相关的表单元素上

语法	<label for="id"(表单元素的id)>标注的文本</label> <input type="radio" name="gender" id="male"/(表单元素id)>

下拉列表  select

下拉列表 select	select 标签表示下拉列表 option 标记插入列表项，该标记不能独立使用，必须在select标记中使用，是一套组合标记 "name" 属性定义该控件的名称 "option" 标记中的value属性定义与选项相关联的值
例如	<select name="car" multiple="multiple" size="2"> <option value="1">vivo</option> <option value="2">Huawei</option> <option value="3">oppo</option> <option value="4">iPhone</option> </select>
列表项（和select组合使用）	<select name="car" multiple="multiple" size="2"> <option value="1">vivo</option> </select>
规定下拉列表中可见的选项的数目	<select name="car" multiple="multiple" size="2">
可多选( 多选时按住CTRL即可多选 )	<select name="car" multiple="multiple" size="2">
分组标签 <optgroup> 需包在select下	<select> <optgroup label="上海"> <option value="">浦东新区</option> <option value="">浦东新区</option> <option value="">浦东新区</option> </optgroup> </select>
数据列表<datalist> 其中input中的list需要与datalist中的id绑定	<form action="#"> 电影: <input type="text" list="diany"/> <datalist id="diany"> <option>肖申克的救赎</option> <option>我们的父辈</option> <option>辛德勒的名单</option> </datalist> </form>
只读（在控件中添加该属性则不可修改）	<input type="text" value="只读" readonly="readonly" /> readonly
必填项	required
控件禁用	disabled
自动获取焦点 打开网页自动选中	autofocus