CSS表单与数据表（下）

2.表单

表单是用户输入内容的地方。表单涉及的控件很多，而且一直很难给它们应用样式。无法控制样式的部分，可以通过自定义控件来解决。

2.1 简单的表单

2.1.1 fieldset与legend

fieldset用于分组相关信息块，legend表明每个fieldset的目的。

<fieldset>

  <legend>Your contact details</legend>

  <!-- 省略 -->

</fieldset>

2.1.2 字段名

label元素用于给每个表单元素添加一个有意义的描述性的名字。在多数浏览器中，点击label元素也会把输入焦点定位到相关的表单元素。

label最大的作用是为使用辅助设备的人增强表单可用性。

将label与具体表单元素相关联的方式：

1、隐式的：

<label>Email <input name="comment-email" type="email" /></label>

2、显式的：

<!-- 把label的for属性设为与相关表单控件的id属性相同的值。 -->

<label for="comment-email">Email Address:</label>

<input name="comment-email" id="comment-email" type="email" />

每个表单控件几乎都会有name和id属性。id属性是表单输入字段与label元素间建立联系的关键，name属性则是表单正确地将数据提交给服务器的关键。

id和name值可以不一样，但为了保持一致性，让它们相同比较好。

2.1.3 输入字段与文本区

textarea元素用于输入多行文本，通过cols和rows设置文本区默认的宽度和高度。

<textarea name="comment-text" id="comment-text" cols="20" rows="10"></textarea>

input元素是个多面手。默认情况下，它被浏览器渲染为一个单行文本输入框，即type属性的默认值是text。

HTML5扩展了type属性。

在有屏幕键盘的设备上，改变type的值会触发软键盘布局相应改变。

2.1.4 把fieldset整合起来

修改fieldset和legend的默认样式：

<form id="comments_form" action="/comments/" method="post">

	<div class="fieldset-wrapper">

		<fieldset>

		  <legend>Your contact details</legend>

		  <p class="field field-text">

			<label for="comment-author">Name:</label>

			<input name="comment-author" id="comment-author" type="text" />

		  </p>

		  <!-- 省略 -->

		</fieldset>

	</div>

	<!-- 省略 -->

	<p class="field-submit">

	  <button id="submit" class="submit" name="submit" type="submit">Post comment</button>

	</p>

</form>

/* 去掉fieldset的默认样式 */

fieldset {

	border: 0;

	padding: 0.01em 0 0 0;

	margin: 0;

	min-width: 0;

}

@-moz-document url-prefix() {

	fieldset {

	  display: table-cell;

	}

}

/* 给fieldset的包装元素应用样式。 */

.fieldset-wrapper {

    padding: 1em;

    margin-bottom: 1em;

    border: 1px solid #eee;

    background-color: #fff;

    box-shadow: 0 0 .25em rgba(0, 0, 0, 0.25);

}

/* :root引用的是HTML元素（文本根元素） */

:root .fieldset-wrapper {

    /* 不支持box-shadow的浏览器只会显示边框，这里去掉这个边框 */

    border: 0;

}

legend {

    /* 去掉legend的默认样式 */

    padding: 0 0 .5em 0;

    font-weight: bold;

    color: #777;

    display: table;

}

2.1.5 文本输入控件

继承字体属性，覆盖浏览器的默认值。

input,

textarea {

    font: inherit;

}

默认情况下，label是一个行内元素。文本输入框的默认宽度取决于浏览器。

.field-text {

    max-width: 20em;

}

.field-text label {

    cursor: pointer;

}

.field-text label,

.field-text input {

    width: 100%;

    box-sizing: border-box;

}

将宽度设置为百分比（width: 100%），同时再用em单位给它设置一个最大宽度（max-width: 20em），可以实现可伸缩的输入字段，且不会过宽。

设置文本输入框的样式：

.field-text input,

.field-text textarea {

    padding: .375em .3125em .3125em; /* 内边距 */

    border: 1px solid #ccc; /* 边框 */

    border-radius: .25em; /* 边框圆角 */

}

2.1.6 处理聚焦状态

设置input元素获得焦点时的样式：

.field-text :focus {

    outline: 0;

    box-shadow: 0 0 .5em rgba(93, 162, 248, 0.5);

    border-color: #5da2f8;

}

2.1.7 留言区

很多浏览器支持让用户缩放文本区。有些浏览器允许横向和纵向缩放文本区，而有些则只允许纵向缩放。

textarea {

  height: 10em;

  resize: vertical; /* 指定缩放的轴向 */

}

2.1.8 单选按钮

<div class="fieldset-wrapper">

    <fieldset>

        <legend>Remember Me</legend>

        <p class="field">

            <label><input name="remember" type="radio" value="yes" />Yes</label>

        </p>

        <p class="field">

            <label><input name="remember" type="radio" value="no" checked="checked" />No</label>

        </p>

    </fieldset>

</div>

input[type="radio"] {

    margin-right: .75em;

}

单选按钮的input类型是radio，为了让用户从两个选项中选择一个，必须让两个input元素的name属性相同。

2.1.9 按钮

HTML支持两种创建按钮的方式：

1、将input的type属性设置为button、reset或submit：

<input type="submit" value="Post comment" />

2、使用button元素，可以指定相同的type属性值：

<button type="submit">Post comment</button>

button控件如果用在表单外部，显然不能提交提交，但可以响应JavaScript的调用。

reset类型的控件（如今用得已经不多了）用于将表单重置回其初始值。

submit类型的控件用于将表单数据发送到表单的action属性指定的URL，当然前提是这个控件必须在表单内部。对于button元素而言，其type属性的默认值是submit。

我们建议使用button来创建按钮，因为这样就可以在button里嵌入其他元素（如span或图片），便于应用样式。

表单控件在不同浏览器中的默认样式不相同。

2.2 表单反馈与帮助

通过placeholder属性为输入字段提供一个输入示例。

<input name="comment-url" id="comment-url" type="url" placeholder="http://example.com" />

占位符（placeholder）文本可以修改的样式有限，各种浏览器都为它提供了不同的伪元素。

::-webkit-input-placeholder {

    font-style: italic;

}

:-ms-input-placeholder {

    font-style: italic;

}

::-moz-placeholder {

    font-style: italic;

}

占位符文本是为了提供输入示例，因此绝对不能把它们当成字段名来使用。

占位符会在用户输入时消失，而用户需要在任何情况下都能看到字段名。

支持HTML5的浏览器自带表单验证功能，相应地也有一批CSS伪类可用于辅助客户端验证。

只要使用较新的HTML5表单属性，浏览器就会帮你验证表单字段的值。比如，把input的type属性设置为email后，如果输入了无效的电子邮件地址并提交表单，浏览器就会给你显示一条错误消息。

输入文本无效时的样式：

.field-text :invalid {

    border-color: #e72633;

    box-shadow: 0 0 .5em rgba(229, 43, 37, 0.5);

}

2.3 高级表单样式

默认情况下，多数表单元素都显示为行内块。

<form id="comments_form" action="/comments/" method="post">

  <div class="fieldset-wrapper">

    <fieldset>

      <legend>Your contact details</legend>

      <p class="field field-text">

        <label for="applicant-name">Name:</label>

        <input name="applicant-name" id="applicant-name" type="text" />

      </p>

      <p class="field field-text">

        <label for="applicant-email">Email Address:</label>

        <input name="applicant-email" id="applicant-email" type="email" />

      </p>

      <p class="field field-text">

        <label for="applicant-twitter">Twitter handle:</label>

        <span class="field-prefixed">

          <span class="field-prefix" id="applicant-twitter-prefix" aria-label="You can omit the @">@</span>

          <input aria-describedby="applicant-twitter-prefix" name="applicant-twitter" id="applicant-twitter" type="text" />

        </span>

      </p>

    </fieldset>

  </div>

  <div class="fieldset-wrapper">

    <fieldset>

      <legend>Which languages have you mastered?</legend>

      <ul class="checkboxes">

        <li> <input type="checkbox" name="lang-as" id="lang-as" /> <label for="lang-as">ActionScript</label> </li>

        <!-- 省略 -->

      </ul>

    </fieldset>

  </div>

  <p class="field-submit"> <button id="submit" class="submit" name="submit" type="submit">Send application</button> </p>

 </form>

/* 省略 */

label {

  cursor: pointer;

  display: block;

}

.field {

	max-width: 20em;

}

.field-text label,

.field-text input,

.field-prefixed,

.field-text textarea {

	width: 100%;

	max-width: 100%;

	-webkit-appearance: none;

	box-sizing: border-box;

}

.field-text input,

.field-text textarea {

	padding: .375em .3125em .3125em;

	border: 1px solid #ccc;

	border-radius: .25em;

}

.checkboxes {

    list-style: none;

    padding: 0;

    column-width: 10em; /* 让复选框组织成列。 */

}

/* 省略 */

在视口足够大的时候显示行内布局。

@media only screen and (min-width: 35em) {

	.flexbox .field-text {

	  display: flex;

	  max-width: 28em;

	}

	.flexbox .field-text label {

	  /* 所有字段名的宽度都为8em，既不扩展也不收缩。 */

	  flex: 0 0 8em; /* flex: flex-grow  flex-shrink  flex-basis */

	  display: flex;

	  align-items: center;

	}

}

这里input元素的宽度设置成了width: 100%，但flex属性的默认值是0 1 auto，因此它会收缩，给固定宽度的字段名腾出地方。

使用Flex实现带前缀的输入字段：

<p class="field field-text">

    <label for="applicant-twitter">Twitter handle:</label>

	<span class="field-prefixed">

	  <span class="field-prefix" id="applicant-twitter-prefix" aria-label="You can omit the @">@</span>

	  <input aria-describedby="applicant-twitter-prefix" name="applicant-twitter" id="applicant-twitter" type="text" />

    </span>

</p>

/* 把前置文本放在一个行内块中。 */

.field-prefix {

	display: inline-block;

	/* 省略 */

	border-radius: .25em;

}

.field-prefixed input {

	max-width: 12em;

}

/* 把.field-prefix转换成一个Flexbox容器。 */

.flexbox .field-prefixed {

	display: flex;

}

.flexbox .field-prefix {

	display: flex;

	border-right: 0;

	border-radius: .25em 0 0 .25em;

	align-items: center;

}

/* 给input元素重新应用max-width，让它自动填满所有剩余空间。*/

.flexbox .field-prefixed input {

	max-width: 100%;

	border-radius: 0 .25em .25em 0;

}

人造复选框：

:root input[type="checkbox"] + label {

	/* 未选中的复选框字段名 */

   background-image: url(images/checkbox-unchecked.png);

}

:root input[type="checkbox"]:checked + label {

	/* 选中的复选框字段名 */

   background-image: url(images/checkbox-checked.png);

}

/* 让复选框本身不可见，但仍然可以被访问和聚焦。这里我们使用一个复选框图片，作为label元素的背景。 */

:root input[type="checkbox"] {

	position: absolute;

	overflow: hidden;

	width: 1px;

	height: 1px;

	clip: rect(0 0 0 0);

}

参考资料：

菜鸟教程
w3school
《精通CSS》— [英] 安迪·巴德、[瑞典] 埃米尔·比约克隆德

巴特西