第十二章 表单

表单

表单可以理解为获取用户输入的信息。最简单的例子就是用户注册。

form、input、button--表单区域、输入框、按钮

• form代表的是需要发送的数据的区域
• input代表的是用户输入信息的部分
• button代表的是按钮，发送数据的开关

form标签中有多个属性分别有

• action的值代表传输目的的URL
• method的值代表传输的方式，有post和get
• enctype的值代表浏览器给服务器发送数据时采用的编码信息。默认为application/x-www-form-urlencoded,但该值不能用于传输文件。有另一种专门传输文件的值为multipart/form-data
• autocomplete是否记录曾经的输入。对应的值是no和off，默认打开。
• target用于设置跳转网页的打开方式。默认为_self在在当前页面打开，_blank为新建页面打开。
• name、id用于对表单设置独一无二的标识符。一般name用于在DOM中查询，而id用于css选择器。

label、autofocus--输入设置

label标签用于将文字和输入框关联起来，label标签中必须有for属性，其值为关联输入框的id值。

<form method="post" action="http://localhost:8080/form">
    <label for="fruit">fruit<input id="fruit" /></label>
</form>

autofocus是input中的属性，用于网页在加载出来时自动聚焦。

<form method="post" action="http://localhost:8080/form">
    <label for="fruit">fruit<input autofocus id="fruit" /></label>
</form>

disable也是input中的属性，用于禁止用户输入

<form method="post" action="http://localhost:8080/form">
    <label for="fruit">fruit<input disable id="fruit" /></label>
</form>

fieldset、legend--输入框布局

fieldset是一个标签，用于将相关联的输入框组织在一起。也可以使用disable的属性禁止该组输入框输入信息。

<form method="post" action="http://localhost:8080/form">
    <fieldset>
        <p>...</p>
    </fieldset>
    <fieldset>
        <p>...</p>
        <p>...</p>
    </fieldset>
</form>

legend是fieldset标签下的一个标签，用于显示该组输入框的内容，可以理解为一个标题。

<form method="post" action="http://localhost:8080/form">
    <fieldset>
        <legend>...</legend>
        <p>...</p>
    </fieldset>
    <fieldset>
        <legend>...</legend>
        <p>...</p>
        <p>...</p>
    </fieldset>
</form>

button的详细属性配置

button标签拥有type、rest、button三个主要属性。 当type属性的值为submit时，该按钮会提交包含他的表单。button还有一些其他的属性

• form链接其他的表单
• formaction将表单提交给其他的URL
• formenctype指定提及表单的编码方式
• formnethod指定提交表单的方式
• formtarget指定提交表单后新页面的打开方式
• formnovalidate对输入数据的检查 当type属性的值为rest时，该按钮会将输入框的内容初始化。 当type属性的值为button时，点击该按钮不会做任何是，需要自己添加JavaScript程序。