Web前端-HeadFirst-笔记-Ch14-表单

表单form

在浏览器中的工作流程：

1. 浏览器加载页面：遇到表单元素时，在页面上创建控件。
2. 用户输入数据
3. 提交表单：浏览器打包数据，发送给服务器。
4. 服务器响应：服务器得到表单数据后，交给合适的脚本处理，得到一个新的html页面，返回给浏览器。

HTML语法

• <form action="URL服务器脚本" method="post/get">

             post:打包表单变量，在后台发送给服务器。发送数据作为请求的一部分，用户不可见。创建小数据包。
             get:打包表单变量，将数据追加在url的最后，向服务器发送请求。用户可以在地址栏看到编码后的数据。普通请求。

• <input type="text/submit/radio/checkbox" name="脚本查询时使用/单（多）选同一个选择name相同" value="空/单（多）选区分选项">

             单选钮加一个布尔属性checked，浏览器显示的时候会默认选中此元素。

• <input type="number" max="" min="">
• <input type="range" max="" min="" step="">
• <input type="color">如果浏览器不支持颜色输入选择，则会得到一个文本输入控件。
• <input type="date">
• <input type="email"> <input type="tel"> <input type="url">移动浏览器会跳出适应的键盘
• <textarea name="元素的唯一的名字" rows="文本区高度为多少个字符" cols="宽度为多少个字符">显示在框内内容</textarea>  可以使用CSS指定文本区的高宽，无法限定字符数。

• <select name="菜单的唯一名字">
  

             <option value="">显示的菜单项</option>
             <option value="菜单项的值">显示的菜单项</option>

          </select>

• 当表单没有包含全部元素，是否可以履行订单，取决于服务器脚本的编写。
• 在表单变量名中添加【】可以提示服务器脚本此变量可能包含多个值。

html表单元素

1. 表单元素的标签：<label>

•    <lable for="id名">显示名</lable>
•    <input type="" id="id名" name="可与id名相同" >
•    为单选钮以及复选框增加标签时，一组中所有控件的名字相同，但每个空间的id唯一。
•     lable与input的相对位置无关，只要for与input的id相对应即可。

2. 组织表单元素在一起：fileset - legend
    类似于div
     <fileset>
        <legend>显示名</legend>
        <input type="" name="" value=""><lable for="">显示名</lable>
        <input type="" name="" value="">显示名
    </fileset>

3. 向服务器脚本发送整个文件
<input type="file" name="">

4. 将单选菜单变为多选菜单:multiple布尔量属性=不再显示一个下拉式菜单，得到一个多选菜单，选择时按下control或者Command。
    <select name="" multiple>
      <option value=""> 显示</option>
   </select>

5.<input Placeholder="">在输入框中显示提示示例

6. required 可以用于任何表单控件，表示必填。

7.password  与text相似，输入的文本会掩码
<input type="password" name="secret">

表单的CSS布局：

将表单以表格形式显示。

html要求

1. 给所有表单元素加<p>使之成为块元素。
2. 将为同一行的元素分为一个<div>中，加class定义行。
3. 一些特殊元素加class类标记。
4. 空白格显示加<p>（空）</p>

CSS：

   body{

       background:背景图片设置 颜色设置等;
       margin:;}

   form{

      display:table;

      padding:px;

      border:;

      background-color:;}

    form textarea{ width:px; height:px;}设置表单中的textarea元素的显示大小。
    div.tableRow{ display:table-row;}使class=tableRow的元素显示为表格的行。

   div.tableRow p{
       display:table-cell;
       vertical-align:top;
       padding:px;}使行中的每个块元素显示为一个单元格，内边距（增加行间距）。

   div.tableRow p:first-child{
      text-align:right;}使用伪类first-child，使一行中的第一个表格右对齐。

   p.其他class{ 按需求设置属性；}