《HTML5与CSS3基础教程》第十六章学习笔记 表单

第16章 表单

16.2 创建表单

<form method="formmethod" action="script.url">
...
</form>

• 这里的formmethod可以是get或者post

  • get：传到服务器，并从服务器获取数据
  • post：仅上传数据

• 这里的script.utl是提交表单时要运行的脚本在服务卡上的位置

16.4 对表单元素进行组织

<form method="post" action="show-data.php">
    <fieldset> <!-- 表单上有很多信息时，可以用fieldset组织起来-->
        <legend></legend><!-- 为每个fieldset提供一个标题-->
        <input />
    </fieldset>
</form>

对于单选按钮，最好总是使用fieldset和legend

16.5 创建文本框

• lable属性：放访问者识别文本框的标签，例如<label for="idlabel">LastName:</label>
• type=text
• name="dataname"：这里的dataname是用于让服务器（和脚本）识别输入数据的文本
• value="default"：这里的default是这个字段中最初显示的数据，如果访问者没有输入别的内容的话，这一数据将被发送到服务器
• placeholder="hinttext"：hinttext用于提示用户的输入，当input元素获得焦点时，这些文本将会消失
• required="required"，表示必填项
• autofocus或autofocus="autofocus"：表示页面在加载时会默认获得焦点
• size="n"：定义文本框的大小
• maxlength="n"：n表示该文本框允许输入的最大字符数

提示　默认情况下，大多数浏览器会保存用户输入的文本，这样就可以在日后节省用户输入的时间。可以通过对input添加autocomplete="off"来关闭这一特性。这对于要求输入敏感信息（如信用卡号）的字段来说是很有用的。如果将它用于form元素（例如，<form method="post" action="process.php" autocomplete="off">），那么其中的每个字段都会这样。

16.6 为表单组件添加说明标签

• label元素：描述表单字段用途的文本
  • for属性：for的值如果跟表单字段的id值相同，该label就与该字段显示地关联起来了

如果for的值与一个表单字段的id的值相同，该label就与该字段显式地关联起来了。这对提升表单的可用性和可访问性都有帮助。例如，如果访问者与标签有交互（如使用鼠标点击了标签），与之对应的表单字段就会获得焦点

16.7 创建密码框

• 密码框中输入的文本会使用圆点或星号进行隐藏

提示　密码框提供的唯一保护措施就是防止其他人看到用户输入的密码。如果要真正地保护密码，可以使用安全服务器（https://）。

16.8 创建电子邮件框、搜索框、电话框和URL框

• 电子邮件框

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" class="field-large" />

• 搜索框

    <label for="search">Search</label>
	<input type="search" id="search" />

• 电话框

    <label for="phone">Phone:</label>
    <input type="tel" id="phone"  class="field-large" placeholder="xxx-xxx-xxxx"pattern="\d{3}-\d{3}-\d{4}" />

• URL框

    <label for="website">Website URL:</label>
    <input type="url" id="website" class="field-large" placeholder="http://www.example.com" />

16.9 创建单选框

<fieldset>
	<legend>Gender:</legend>
    	<p>
    		<input type="radio" id="gender-male" name="gender" value="male">
    		<label for="gender-male">Male</label>
    	</p>
    	<p>
    		<input type="radio" id="gender-female" name="gender" value="female">
    		<label for="gender-female">FeMale</label>
    	</p>
</fieldset>

16.10 创建复选框

	<input type="checkbox" id="bicycle" name="vehicle" value="bicycle">
	<label for="bicycle">bicycle</label>
	
	<input type="checkbox" id="bus" name="vehicle" value="bus">
	<label for="bus">bus</label>
	
	<input type="checkbox" id="subway" name="vehicle" value="subway">
	<label for="subway">subway</label>

16.11 创建文本区域

<label for="bio">Bio:</label> 
<textarea id="bio" name="bio" cols="40" rows="5" class="field-large"></textarea>

16.12 创建选择框

1.同一组选择框

	<label for="state">State:</label>
	<select id="state" name="state">
		<option value="AL">Alabama</option>
		<option value="AK">Alaska</option>
		<option value="California">California</option>
	</select>

2.分组选择框

	<label for="referral">Where did you find out about us?</label>
	<select id="referral" name="referral">
	    <optgroup label="Online">
	      <option value="social_network">Social Network</option>
	      <option value="search_engine">Search Engine</option>
	    </optgroup>
	    <optgroup label="Offline">
	      <option value="postcard">Postcard </option>
	      <option value="word_of_mouth">Word of Mouth</option>
	    </optgroup>
	</select>

16.13 让访问者上传文件

	<form method="post" action="show-data.php" enctype="multipart/form-data">
		<label for="picture">Picture</label>
		<input type="file" id="picture" name="picture">
		<p class="instructions">Maximum size of 700k.JPG,GIF or PNG.</p>
	</form>

16.14 创建隐藏字段

<input type="hidden" name="step" value="6" />
<!-- 访问者不会看到这个输入框，但他们提交表单的时候，
名“step”和值“6”会随着表单中从访问者输入获取的数据一起传送给服务器 -->

提示　不要将密码、信用卡号等敏感信息放到隐藏字段中。即便它们不会显示到网页中，访问者也可以通过查看HTML源代码看到它们。

提示　要创建访问者可见但不可修改的表单元素，有两种方法。一种是使用disabled（禁用）属性。另一种是使用readonly（只读）属性。与禁用字段不同，只读字段可以获得焦点，访问者可以选择和复制里面的文本，但不能修改这些文本。它只能应用于文本输入框和文本区域，例如，<input type="text" id="coupon" name="coupon" value="FREE" readonly />。还可以使用readonly="readonly"这样的形式，结果是一样的。

16.15 创建提交按钮

    <!-- 结合文本和图像的提交按钮 -->
	<form>
		<button type="submit" class="btn">
			<img src="勾.png" alt="">
			Create Profile
		</button>
	</form>

样子。创建重置按钮可以使用或Reset。我们也可以为重置按钮添加样式。

提示　HTML5对type="email"和type="URL"的input添加了自动验证功能。对提交按钮使用formnovalidate属性可以关闭该功能，如。

16.16 禁用表单元素

• 禁用表单元素的方法：在表单元素的开始标签后输入disabled或者disabled="disabled"（两种方法在HTML5中均可以）。

提示　可以使用JavaScript将表单元素的状态由禁用改为可用（也可以反过来）

16.17 根据状态为表单设置样式

选择器	应用
:focus	获得焦点的字段
:checked	选中的单选按钮或复选框
:disabled	具有disabled属性的字段
:enable	与:disabled相反
:required	具有required属性的字段
:optional	与:required相反
:invalid	其值与pattern属性给出的模式不匹配的字段；或值不是有效电子邮件格式的电子邮件框，值不是有效URL格式的URL框，以及任何标记为required但值为空的字段
:valid	与:invalid相反

input:focus,
textarea{
    background-color:greenyellow;
}
<!-- 为任意获得焦点的input或textarea添加背景色 -->