DW-表单基础
表单
1. 表单（p184）：⽤来采集⽤户输⼊到⽹页中的数据。其功能是收集⽤户信息，并将信息发送给后台服务器，从⽽实现⽹页与⽤户之间的交互。表单通常⽤于⽤户登录、留⾔簿、⽹上报名、产品订单、⽹上调查及搜索界⾯等。
表单的组成部分（p184）：
表单域：相当于⼀个容器 包含表单标签和各种表单控件。
表单标签：⼀些说明性⽂字，提⽰⽤户进⾏填写或选择。
表单控件：包含⽂本域、复选框、⽂件域、图像域和按钮等。（p185）
2.  操作：创建表单（p184-188）
①定义表单域：
<form name=”表单名称” method=”提交⽅式” action=”url地址”>
各种表单控件
</form>
②在表单域内插⼊表格，主要⽤于表单各个控件的布局。因为表单控件是⾏级元素，不能单个⼀⾏显⽰。表格做简单布局，整齐划⼀。
html单行文本框代码怎么写
③在表格的单元格内，插⼊表单标签和表单控件。
3. 表单标签 主要是⽂本域和按钮 其他参考p185
①⽂本域：
单⾏⽂本域和密码域 <input>标签 单标签不成对出现
多⾏⽂本域 <textarea> </textarea> 成对标签
⽂本域：name=””  ⽤于标明该⽂本域的名称。
字符宽度：size=”” 设置⽂本域中最多可显⽰的字符数。
最多字符数：maxlength=”” 设置单⾏、密码⽂本域中最多可输⼊的字符数。
类型：type=”text/password” 设置⽂本域的类型，可在单⾏、多⾏、密码3个类型中任选⼀个。如果是密码类型，则⽹页中密码框内容⽤*显⽰。
如果是多⾏⽂本域，代码有变化。
初始值：value=”” 设置⽂本域的初始值，即在⾸次载⼊表单时⽂本域中显⽰的值。
类：class=”” 或者id=”” 将CSS规则应⽤于⽂本域对象。
②按钮
包括普通按钮 提交按钮 重置按钮 <input>标签 单标签 不成对出现
按钮名称：name=”” ⽤于输⼊选中按钮的名称，每个按钮的名称不能相同。
值：value=”” 设置按钮上显⽰的⽂本。
动作：type=”” 设置⽤户单击按钮时将发⽣的操作，包括3个选项。
提交表单：type=”submit”单击按钮时，将表单数据提交到表单指定的处理程序处理。
重设表单：typy=”reset”将表单域内的各对象值还原为初始值。
⽆：type=”button” 单击按钮时，选择为该按钮附加的⾏为或脚本。
类：class=”” 或者id=”” 将CSS规则应⽤于按钮。
③ 复选框（复选框组）
复选框<input>标签注意：<input>标签是⾏级标签同⾏显⽰，不会⾃动换⾏。可以使⽤换⾏标签<br />来实现换⾏。
复选框名称：name=”” 输⼊⼀个名称。
选定值：value=”” 输⼊⼀个选取该复选框时要发送给服务器断的应⽤程序或者处理脚本的值。
初始状态：checked="checked" “已勾选”项，浏览器⾸次加载时该选项处于被选定状态。
复选框组：⾃动添加⼀组（⾃定义个数）复选框。
名称：name=”” 为复选组框输⼊⼀个名称。
复选框“+”“-”：增加或者删除⼀个复选框。单击上下按钮为复选框项排序。
标签：单击标签下⾯的“复选框”，可以输⼊⼀个新名称。下图“运动”“爱好”等在此输⼊设置。
值：value=”” 单击下⾯复选框⽂字，可输⼊⼀个新值。
布局，使⽤：使⽤哪种布局⽅式进⾏换⾏。尽量选择换⾏符<br />，整体表单布局我们使⽤表格，另外，复选框组内每⼀项可以横向显⽰，在代码区域删掉<br />换⾏标签就可以。
④单选按钮（单选按钮组）：
多个选项中只能选择⼀个。尽量使⽤插⼊单选按钮组。因为单选按钮每⼀项之间有互斥性，只能选择⼀个。⼀组中的所有单选按钮都必须有同样的名称，但域值不同。
类型：type=”radio”
⑤⽂件域：
上传⽂件，或者注册时上传头像照⽚。类型：type=”file”
⑥下拉列表：
选择年⽉⽇，或者学院、专业时。写在<select></select>标签之间。
列表的每⼀项写在<option></option>标签内。
初始化时选定：selected=”selected” 浏览器中显⽰的选项。
⑦图像域：
通过图像域制作各具特⾊的按钮图像代替默认的按钮。
另⼀种做特⾊按钮的⽅法就是为按钮添加CSS样式。
各类表单控件及标签
各类表单控件及标签
表单控件控件分类控件标签类型 type
⽂本域单⾏⽂本域<input>type=”text”
密码域<input>type=”password”多⾏⽂本域<textarea></textarea>type=”text”
按钮普通按钮<input>type=”button”提交按钮<input>type=”submit”重置按钮<input>type=”reset”
复选框复选框/复选框组<input>type=”checkbox”
单选按钮单选按钮/单选按钮组<input>type=”radio”
⽂件域<input>type=file”
图像域<input>type=”image”
下拉列表<select></select>
4. 使⽤CSS设置表单样式（美化表单、表单控件）（p188-190）
①表单<form></form>标签 可以设置width:220px;（宽）、height:75px;（⾼）、background-color:red;（背景⾊）、border:1px solid blue;（边框）、padding:10px;（内边距）等属性。
②表单控件 1  可以使⽤标签选择器定义，注意标签所属⽗元素。使⽤标签选择器定义样式，会影响到⽹页中所有标签。如果某些标签想要不同效果，需另外设置。
在此可以设置⽗元素引⽤类，再定义⽗元素下表单标签样式。
2  在表单控件便签内引⽤类、ID选择器。这样需要每个标签都引⽤。
注意：样式设置⽅法择优⽽选。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。