HTML-表单-构造HTML表单

2018-04-25

一、表单元素
1.<form>元素
<form> 元素按照一定的格式定义了表单和确定表单行为的属性。想要创建一个HTML表单时，都必须从这个元素开始，然后把所有内容都放在里.

严格禁止在一个表单内嵌套另一个表单，嵌套会使表单的行为不可预知，这取决于使用的浏览器;
表单小部件可以在form表单之外使用，但是这样与form表单五任何关系,必须使用JS定制它们的行为;
HTML5在HTML表单元素中引入了form属性,显示的将元素和表单绑定在一起，即使元素不在form中.

2.<fieldset>和<legend>元素

 <fieldset>元素是一种方便的用于创建具有相同目的的小部件组的方式，出于样式和语义目的。 
 可以在<fieldset>开口标签后加上一个 <legend>元素来给<fieldset> 标上标签。 
 <legend>的文本内容正式地描述<fieldset>的用途。它是包含在<fieldset>里的。
许多辅助技术将使用<legend> 元素，就好像它是相应的 <fieldset> 元素。

eg:
form

 <form>
  <fieldset>
    <legend>Fruit juice size</legend>
    <p>
      <input type="radio" name="size" id="size_1" value="small">
      <label for="size_1">Small</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_2" value="medium">
      <label for="size_2">Medium</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_3" value="large">
      <label for="size_3">Large</label>
    </p>
  </fieldset>
</form>
解析:	
	每当有一组单选按钮时，应该将它们嵌套在<fieldset>元素中;
	一般来说，<fieldset>元素也可以用来对表单进行分段;
	长表单应该在多个页面之间进行拆分，但是如果表单很长，但必须在单个页面上，那么在不同的fieldsets中放置不同的相关部分可以提高可用性
	因为它对辅助技术的影响， <fieldset> 元素是构建可访问表单的关键元素之一。
	如果可能，每次构建表单时，尝试侦听屏幕阅读器如何解释它。如果听起来很奇怪，试着改进表单结构.

3.<label>元素

<label> 元素是为HTML表单小部件定义标签的正式方法;
设置for属性很重要;

标签也可点击

对于单选按钮和复选框特别有用——这种控件的可点击区域可能非常小，设置标签来使它们可点击区域变大是非常有用的;

eg:

 <form>
  <p>
    <label for="taste_1">I like cherry</label>
    <input type="checkbox" id="taste_1" name="taste_cherry" value="1">
  </p>
  <p>
    <label for="taste_2">I like banana</label>
    <input type="checkbox" id="taste_2" name="taste_banana" value="2">
  </p>
</form>
解析:
	label标签的for属性和input
	
 ```	
 
 多个标签		
 
 	严格地说，可以在一个小部件上放置多个标签，但不推荐，因为一些辅助技术可能难以处理它们。在多个标签的情况下,应该将一个小部件和它的标签嵌套在一个<label>元素中
 eg:
 
 ```html
 <p>Required fields are followed by <abbr title="required">*</abbr>.</p>

<!-- So this: -->
<div>
  <label for="username">Name:</label>
  <input type="text" name="username">
  <label for="username"><abbr title="required">*</abbr></label>
</div>

<!-- would be better done like this: -->
<div>
  <label for="username">
    <span>Name:</span>
    <input id="username" type="text" name="username">
    <abbr title="required">*</abbr>
  </label>
</div>

<!-- But this is probably best: -->
<div>
  <label for="username">Name: <abbr title="required">*</abbr></label>
  <input id="username" type="text" name="username">
</div>

二、表单的通用HTML结构
1.用<div>元素包装标签和它的小部件是很常见的做法。<p>元素也经常被使用，HTML列表也是如此（后者在构造多个复选框或单选按钮时最为常见）;
2.除了<fieldset>元素之外，使用HTML标题（例如，<h1>、<h2>）和分段（如<section>）来构造一个复杂的表单也是一种常见的做法;
3.表单包含了<section>元素中包含的每个单独的功能部分，以及一个<fieldset>来包含单选按钮。
4.eg:构建一个表单结构
form1

//HTML
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="html-basic.css">
</head>
<body>
<!-- 构建一个表单 -->
<form action="">
  <h1>Payment form</h1>
  <!-- 带*号的必填 <abbr title="required">*</abbr>  可以直接换成* -->
  <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
  <section>
      <h2>Contact information</h2>
      <fieldset>
        <legend>Title</legend>
        <ul>
            <li>
              <label for="title_1">
                <input type="radio" id="title_1" name="title" value="M." >
                Mister
              </label>
            </li>
            <li>
              <label for="title_2">
                <input type="radio" id="title_2" name="title" value="Ms.">
                Miss
              </label>
            </li>
        </ul>
      </fieldset>
      <p>
        <label for="name">
          <span>Name: </span>
          <strong><abbr title="required">*</abbr></strong>
        </label>
        <input type="text" id="name" name="username">
      </p>
      <p>
        <label for="mail">
          <span>E-mail: </span>
          <strong><abbr title="required">*</abbr></strong>
        </label>
        <input type="email" id="mail" name="usermail">
      </p>
      <p>
        <label for="pwd">
          <span>Password: </span>
          <strong><abbr title="required">*</abbr></strong>
        </label>
        <!-- 密码输入框 默认密文 -->
        <input type="password" id="pwd" name="password">
      </p>
  </section>
  <section>
    <h2>Payment information</h2>
    <p>
      <label for="card">
        <span>Card type:</span>
      </label>
      <!-- 下拉选择框 -->
      <select id="card" name="usercard">
        <option value="visa">Visa</option>
        <option value="mc">Mastercard</option>
        <option value="amex">American Express</option>
      </select>
    </p>
    <p>
      <!-- label的for属性将label标签和表单小部件-input标签链接在一起，点击label也能使光标响应 -->
      <label for="number">
        <span>Card number:</span>
        <strong><abbr title="required">*</abbr></strong>
      </label>
        <input type="text" id="number" name="cardnumber">
    </p>
    <p>
      <label for="date">
        <span>Expiration date:</span>
        <strong><abbr title="required">*</abbr></strong>
        <em>formatted as mm/yy</em>
      </label>
      <input type="text" id="date" name="expiration">
    </p>
  </section>
  <!-- 添加按钮到表单底部,用于提交表单数据 -->
  <p> <button type="submit">Validate the payment</button> </p>
</form>
</body>
 ```		
 ```css
 //CSS
 
 h1 {
    margin-top: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

form {
    margin: 0 auto;
    width: 400px;
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
}

div+div {
    margin-top: 1em;
}

label span {
    display: inline-block;
    width: 120px;
    text-align: right;
}

input, textarea {
    font: 1em sans-serif;
    width: 250px;
    box-sizing: border-box;
    border: 1px solid #999;
}

input[type=checkbox], input[type=radio] {
    width: auto;
    border: none;
}

input:focus, textarea:focus {
    border-color: #000;
}

textarea {
    vertical-align: top;
    height: 5em;
    resize: vertical;
}

fieldset {
    width: 250px;
    box-sizing: border-box;
    margin-left: 136px;
    border: 1px solid #999;
}

button {
    margin: 20px 0 0 124px;
}

label {
  position: relative;
}

label em {
  position: absolute;
  right: 5px;
  top: 20px;
}

参考资料：
1.HTML表单
2.构造表单
3.fieldset
4.legend
5.checkbox-label

展开全文 >>

HTML-表单-创建第一个表单

2018-04-24

一、HTML表单概念
1.HTML表单是用户和Web站点或应用程序之间交互的主要内容之一.

允许用户将数据发送到web站点;
大多数情况数据被发送到web服务器;
wenb页面也可以拦截数据并自己使用;

2.HTML表单是由一个或多个小部件组成.

小部件包含:单行或多行、选择框、按钮、复选框、或单选按钮;

3.HTML表单和常规HTML文档主要区别:

表单收集的数据发送到web服务器，需要设置web服务器来接收和处理数据。

二、设计表单
form-sketch-low
1.<form>元素
最佳实践：必须配置action和method属性

action:定义了在提交表单时所收集的数据的位置(url).
method:定义了发送数据的HTTP方法(get或post).

1
2
3

<form action="/my-handling-form-page" method="post">
...   
</form>

2.<label>,<input>,<textarea>元素

<body>

  <form action="/my-handling-form-page" method="post">
    <div>
      <label for="name">Name:</label>
      <input type="text" id="name"/>
    </div>
    <div>
      <label for="mail">E-mail:</label>
      <input type="mail" id="mail"/>
    </div>
    <div>
      <label for="msg">Message:</label>
      <textarea name="msg" id="msg" cols="30" rows="10"></textarea>
    </div>
    <div class="button">
          <button type="submit">Send your message</button>
    </div>
  </form>
  <script src="html-basic.js"></script>
</body>
解析：	
	<div>元素可以方便构造代码,使样式更简单；
	<label>元素上使用for属性,将标签链接到表单小部件的一种正式方式；
	<input>元素中，最重要的是type属性，它定义了input属性的行为方式；
		默认值text，表示一个基本的单行文本字段，接受任何类型的文本输入；
		email，它定义了一个只接受格式良好的电子邮件地址的单行文本字段；
	注意<input  ... />和<textarea></textarea>的语法区别：
		<input   / > 标签是一个空元素，不需要关闭标签，获取值时必须使用value值；
		<textarea>不是一个空元素，必须使用适当的结束标记来关闭它；

3.<button>元素

<div class="button">
    <button type="reset">reset</button>
    <button type="submit">submit</button>
    <button>Send your message</button>
</div>
解析:	
	单击 submit 按钮 发送表单的数据到<form>元素的action 属性所定义的网页。
	单击 reset 按钮 将所有表单小部件重新设置为它们的默认值。从用户体验的角度来看，这被认为是一种糟糕的做法。
	单击button 按钮……不会发生任何事！这听起来很傻，但是用JavaScript构建定制按钮非常有用

tips:

可以使用相应类型的 <input>元素来生成一个按钮，如 <input type="submit">,<input>元素只允许纯文本作为其标签。
<button>元素的主要优点是，<button>元素允许完整的HTML内容，允许更复杂、更有创意的按钮文本。

三、表单基本样式

form {

    /* 表单居中 */
    margin: 0 auto;
    width: 400px;
    /* 显示轮廓 */
    padding: 1em;
    border: 1px solid #ccc;
    border-radius: 1em;
}

/*

A,B	匹配满足A（和/或）B的任意元素（参见下方”同一规则集上的多个选择器”）.
A B	匹配任意元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点）
A > B	匹配任意元素，满足条件：B是A的直接子节点
A + B	匹配任意元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）
A ~ B	匹配任意元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着A）
*/
form div + div {

    margin-top: 1em;
}

label {

    /* 所有label大小相同正确对齐 */
    display: inline-block;
    width: 90px;
    text-align: right;
}

input, textarea{

    /* 确保所有文本输入框字体相同
     textarea默认是等宽字体 */
  font: 1em sans-serif;

  /* 使所有文本输入框大小相同 */
  width: 300px;
  box-sizing: border-box;

  /* 调整文本输入框的边框样式 */
  border: 1px solid #999;
}
input:focus, textarea:focus {
    /* 给激活的元素一点高亮效果 */
    border-color: #000;
  }
  textarea {
    /* 使多行文本输入框和它们的label正确对齐 */
    vertical-align: top;

    /* 给文本留下足够的空间 */
    height: 5em;
  }
  .button {
    /* 把按钮放到和文本输入框一样的位置 */
    padding-left: 90px; /* 和label的大小一样 */
  }
  
  button {
    /* 这个外边距的大小与label和文本输入框之间的间距差不多 */
    margin-left: .5em;
  }

四、向web服务器发送表单数据

1.设置form标签的action和method属性，用以发送数据的位置和方式；
2.需要为数据提供一个名称：

在浏览器：数据名称告知浏览器哪个名称提供每个数据；
在服务器：数据名称允许服务器按照名称处理每个数据块；

3.将数据命名为表单，需要在每个表单小部件上使用name属性来收集特定的数据块：

<form action="/my-handling-form-page" method="post"> 
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" />
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_email" />
  </div>
  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>

  ...

解析:
    表单会发送三个已命名的数据块 "user_name", "user_email", 和 "user_message";
    这些数据将用使用HTTP POST 方法,把信息发送到URL为 "/my-handling-form-page"目录下;     
    在服务器端，位于URL"/my-handling-form-page" 上的脚本将接收的数据作为HTTP请求中包含的3个键/值项的列表;