1 form定义表单

1-1 form的基本格式&＃xff1a;

容器级标签

作用&＃xff1a;用于为用户创建一个HTML表单&＃xff0c;并对用户输入或选择的信息进行收集。 比如微博注册界面就是一个表单。用来收集用户输入的手机号选择的生日等信息进行用户注册。

html表单是由网页上可以提供用户输入和选择的一些控件&＃xff08;表单元素&＃xff09;组成的。
如上图中用户输入的手机号的输入框就是一个表单元素&＃xff0c;每一个用户可以选择、点击的“地方”都是一个控件&＃xff08;表单元素&＃xff09;。

现象&＃xff1a;为了吸引用户量&＃xff0c;现在网站都偏向轻注册重验证。即用越少的步骤完成用户的注册&＃xff0c;当用户对网站的需求增加时&＃xff0c;再重新完成用户信息的收集。

1-2 form下的input标签的属性

1-2-1 type属性

取值&＃xff1a;

• text&＃xff1a;输入框&＃xff0c;用户可以在框内任意输入值&＃xff0c;并将其显示出来。
• password&＃xff1a;密码输入框&＃xff0c;将用户输入的内容用“ ● ”显示出来。该状态只是对输入的样式进行了改变&＃xff0c;本质上起不到对密码的保护作用&＃xff0c;实际项目重需配合加密手段使用。
• radio&＃xff1a;单选框&＃xff0c;需搭配name值使用&＃xff08;name值见下文&＃xff09;。形象记忆&＃xff1a;老式收音机&＃xff08;radio&＃xff09;的按钮是单选按键。
• checkbox&＃xff1a;多选框。
• button&＃xff1a;普通按钮&＃xff0c;对页面状态没有影响。按钮上显示的内容根据value值进行定义&＃xff0c;&＃xff08;value值见下文&＃xff09;。
• submit&＃xff1a;提交按钮。
• reset&＃xff1a;重置按钮&＃xff0c;是对表单所填内容的全部删除&＃xff0c;不是刷新页面重新进入。
• file&＃xff1a;提交文件按钮。不需要用value对按钮上的内容进行定义&＃xff0c;会自动显示“选择文件”。
• hidden&＃xff08;了解&＃xff09;&＃xff1a;隐藏标签。对用户的一些特定信息进行隐藏&＃xff0c;以便后续重新调用该用户的信息。

1-2-2 input标签的其他属性

• name&＃xff1a;定义input标签的名称。可以将名称一样的看作是一组。
• value&＃xff1a;
  当与输入框搭配时&＃xff0c;用于显示初始的默认值。
  当与选择框搭配时&＃xff0c;用于显示与该选择框对应的内容。
  当与type某些按钮属性值搭配时&＃xff0c;用于显示按钮上的文本。
• 示例&＃xff1a;

唱歌


• placeholder&＃xff1a;占位。呈灰色显示&＃xff0c;用于提示用户。

• 显示&＃xff1a;

• 

• maxlegth&＃xff1a;可输入的最大字符长度。

• minlegth&＃xff1b;可输入的最小字符长度。

• required&＃xff1a;必填项。无属性值。

• readonly&＃xff1a;只读。无属性值。

• 显示&＃xff1a;

• 

• disabled&＃xff1a;禁用。无属性值。

• 显示&＃xff1a;

• 

• autofocus&＃xff1a;自动聚焦。当打开网页时&＃xff0c;光标自动显示在该表单元素&＃xff0c;且呈选中状态。无属性值。

1-3 label标签&＃xff08;for"id"&＃xff09;

将输入框与前边对应的文字连接起来&＃xff0c;当点击对应文字时也会选中输入框。
格式&＃xff1a;

用户名


显示&＃xff1a;

1-4 select下拉菜单

4-4-1 select标签的格式&＃xff1a;

选择1选择2选择3选择4选择5


显示&＃xff1a;

解释&＃xff1a;基础表格&＃xff1a;创建一个选择表单&＃xff0c;含有5个选项&＃xff08;5个option子标签&＃xff09;。
丰富一下表格&＃xff1a;将选项分为两组——添加了optgroup分组标签&＃xff0c;用label属性将其命名两组。当鼠标在图中“第一组”上悬停时&＃xff0c;是不可选中的状态。

1-4-2 select标签的属性

• size&＃xff1a;可定义显示下拉选择框的显示个数。
  

• multiple&＃xff1a;可定义选择的个数&＃xff0c;无属性值&＃xff0c;配合ctrl键使用。
  

• seleted&＃xff1a;&＃xff08;option的属性&＃xff09;定义默认选择的选项。
  请选择
  
  默认选择在“请选择”上&＃xff0c;则下拉框显示的是该内容。同时添加了disable属性&＃xff0c;让其不可被选择。

1-5 textarea标签

定义多行的文本输入。
格式&＃xff1a;

个人介绍&＃xff1a;


显示&＃xff1a;

解释&＃xff1a;文本区中可容纳无限数量的文本&＃xff0c;通过其cols、cols属性可定义其显示的行数和列数。如图是5行5列。

1-6 fieldset标签

给表单外边加边框
格式&＃xff1a;

显示&＃xff1a;

解释&＃xff1a;通过fieldset标签给的form表单加了边框&＃xff0c;用legend标签给该表单加了标题。

2 CSS样式文件

2-1 概念

Cascading Style Sheets&＃xff08;缩写&＃xff1a;CSS&＃xff09;层叠样式表 。样式定义如何显示 HTML 元素。

2-2 格式

选择器{
声明&＃xff1b;
}

2-3css常见声明

第一次了解&＃xff1a;

• width&＃xff1a;设置标签的宽度
• height&＃xff1a;设置标签的高度
• background-color&＃xff1a;设置标签的背景颜色
• border&＃xff1a;边框属性值有线框的宽度&＃xff0c;形态&＃xff08;实线、虚线…&＃xff09;&＃xff0c;线框的颜色
• font-family&＃xff1a;字体&＃xff0c;比如宋体。

2-4css样式的书写位置

• 行内式&＃xff1a;直接写在标签内的样式属性
• 嵌入式&＃xff1a;用style标签包裹&＃xff0c;写在html的头部&＃xff08;&＃xff09;
• 外链式&＃xff1a;用link链接&＃xff0c;写在html的头部&＃xff08;&＃xff09;最常用&＃xff0c;将样式与html标签分开。
• 导入式:用&＃64;improt url()链接&＃xff0c;写在html的头部&＃xff08;&＃xff09;

小白训练中&＃xff0c;欢迎指正。