HTML_3 表单 #19

Qingquan-Li · 2017-01-12T17:10:26Z

通俗的讲，表单就是一个将用户信息组织起来的容器。将需要用户填写的内容放置在表单容器中，当用户点击“提交”按钮时，表单会将数据统一发送给服务器。
典型的应用场景：登录注册、网上订单信息填写、调查问卷、搜索。

HTML 表单标签

表单标签	描述
`<form>`	定义供用户输入的表单
`<input>`	定义输入域
`<textarea>`	定义文本域 (一个多行的输入控件)
`<label>`	定义了 `<input>` 元素的标签，一般为输入标题,可改进鼠标可用性
`<fieldset>`	定义了一组相关的表单元素，并使用外框包含起来
`<legend>`	定义了 `<fieldset>` 元素的标题
`<select>`	定义了下拉选项列表
`<optgroup>`	定义选项组
`<option>`	定义下拉列表中的选项
`<button>`	定义一个点击按钮
`<datalist>`	指定一个预先定义的输入控件选项列表 (html5新增)
`<keygen>`	定义了表单的密钥对生成器字段 (html5新增)
`<output>`	定义一个计算结果 (html5新增)

常见的表单元素

表单基本结构 `<form>` 标签

语法：

<form action="表单提交地址" method="提交方法">  
文本框、按钮等表单元素...      
</form>

注意：

action 属性：如果为空则代表向当前页面提交
method 属性：可选值 post、get
get 方法提交参数在地址栏可见
post 方法一般用于多数据、保密数据提交

表单基本元素 `<input>` 标签

多数情况下被用到的表单标签是输入标签（ <input> ）。输入类型是由类型属性（type）定义的

语法：

<input name="表单元素名称" type="类型" value="值" size="显示宽度" maxlength=“最大长度" checked="是否选中" />

注意 :

type 属性：可选值 text（默认）、password、button、checkbox、radio 等
checked 属性：仅与 <input type="checkbox"> 或 <input type="radio"> 配合使用，选中值为 checked

HTML 表单 - 输入元素：

tupe	功能	例子
text	单行文本输入	`<input type="text" name="username" />`
password	密码	`<input type="password" name="password" />`
radio	单选	`<input type="radio" name="gender" value="male" />男` `<input type="radio" name=" gender" value="female" />女`
checkbox	多选	`<input type="checkbox" name="hobby" value="reading" />阅读` `<input type="checkbox" name="hobby" value="drawing" />绘画`
button	普通按钮	`<input type="button" value="播放音乐" />`
reset	重置表单数据	`<input type="reset" value="重置" />`
submit	提交表单数据	`<input type="submit" value="提交" />`
file	文件上传	`<input type="file" name="files" />`
hidden	隐藏域（数据隐藏提交）	`<input type="hidden" name="name" value="1" />`

PS：

HTML <input> value 属性：

value 属性规定 <input> 元素的值。

value 属性对于不同 input 类型，用法也不同：

对于 "button"、"reset"、"submit" 类型定义按钮上的文本
对于 "text"、"password"、"hidden" 类型定义输入字段的初始（默认）值
对于 "checkbox"、"radio"、"image" 类型定义与 input 元素相关的值，当提交表单时该值会发送到表单的 action URL。

注意：value 属性对于 <input type="checkbox" /> 和 <input type="radio" /> 是必需的。
注意：value 属性不适用于 <input type="file" />。

在后台如果你想得到复选框的内容就是value 来取。
当你在接收表单数据的页面中获取数据时，得到的就是value的值。

name-value：

name 是控件的名称（多个控件可以取同一个名称），value 是控件的值
并不是所有控件的 value 都会显示出来，比如 checkbox, radio, hidden
定义控件的 name 和 value 就可以在服务器上获取这个控件和它的值
没看到 submit 的 name，并不表示浏览器忽略了它的 name，在提交之前它也被浏览器定义了 name，在服务器上一样可以得到它的 name 和 value
控件不定义 name / value 也可以显示，只是为了方便在服务器接收和区别，才定义它的 name / value，当然按钮的 value 不光是存放它的值，也用来显示

列表框

<select name="指定列表名称"   size="显示的行数">  
     <option  value="选项值"    selected="selected">…</option>  
     <option  value="选项值" >…</option>  
</select>

文本域

<textarea name="naem" cols="列宽"  rows="行宽">   
文本内容
</textarea>

表单的高级用法

关联表单元素（表单元素的标注）

语法：

<label for="关联元素ID"></label>

示例_点击 label 标签鼠标聚焦文本框中：

<label for="username">姓名: </label>  
<input name="name" id="username" size="20"/>

或：

<label>姓名:<input  name="name" size="20"/></label>

只读属性、禁用属性

readonly：希望某个框内的内容只允许用户看，不能修改
disabled：因没达到使用的条件，限制用户使用

示例：

用户须知：  
<textarea readonly="readonly">  
用户需遵循以下协定： xxxxx  
</textarea>  
  
<input type="submit" name="register" value="注册" disabled="disabled"/>

附 Demo代码示例

1. 普通表单

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>表单</title>  
</head>  
  
<body>  
    <form action="" method="post">  
        <!--文本框、密码框-->  
        <p>用户名：<input name="name" type="text" value="Fatli" /></p>  
        <p>密 码：<input name="password" type="password" /></p>  
          
        <!--单选按钮、复选框-->  
        <p>  
            性别：  
            <input name="gender" type="radio" value="man" />男   
            <input name="gender" type="radio" value="woman" />女   
            <!--对表单元素进行标注（增强鼠标的可用性）-->  
            <input name="gender" type="radio" value="anthor" id="anthor" />  
            <label for="anthor">其他</label>  
        </p>  
          
        <p>  
            爱好：  
            <input name="insterest" type="checkbox" value="sports" checked="checked"/>运动  
            <input name="insterest" type="checkbox" value="it" />IT  
            <input name="insterest" type="checkbox" value="it" />音乐  
        </p>  
          
        <!--列表框-->  
        <p>  
            出生日期：  
            <input name="birthYear" size="2" maxlength="4" />年   
            <select name="birthMonth">  
                <option value="1">一月</option>  
                <option value="2">二月</option>  
                <option value="3">三月</option>  
                <option value="4">四月</option>  
                <option value="5">五月</option>  
                <option value="6">六月</option>  
                <option value="7">七月</option>  
                <option value="8">八月</option>  
                <option value="9">九月</option>  
                <option value="10">十月</option>  
                <option value="11">十一月</option>  
                <option value="12">十二月</option>  
            </select>月   
            <input name="birthDay" size="2" maxlength="4" />日    
        </p>  
          
        <!--按钮-->  
        <p>  
            <input type="button" name="butButton" value="button按钮"   
            onClick="alert(this.value)">  
            <input type="submit" name="butSubmit" value="submit按钮">  
            <input type="reset" name="butReset" value="reset按钮">  
        </p>  
    </form>  
</body>  
</html>

2. 多行文本域

<!--多行文本域-->  
<form action="" method="post">  
<span style="white-space:pre">  </span><p>  
<span style="white-space:pre">      </span>自我评价：<br />  
<span style="white-space:pre">      </span><textarea name="textarea" cols="10" rows="2"></textarea>  
<span style="white-space:pre">  </span></p>  
</form>

3. 文件域

<!--文件域-->  
<!--提交包含文件域的表单时，由于提交的表单数据包括普通的表单数据、文件数据等多部分内容，所以必须设置表单的 "enctype" 编码属性为 "multipart/form-data"，表示将表单数据分为多部分提交-->  
<form action="" method="post" enctype="multipart/form-data">  
    <p>  
        <input type="file" name="files" /><br />  
        <input type="submit" name="upload" value="上传" />  
    </p>  
</form>

4. 隐藏域（表单数据隐藏提交，用 method="get" 提交可以在地址栏看到提交的参数）

<!--隐藏域-->  
<form action="" method="get">  
    <!--文本框、密码框-->  
    <p>用户名：<input name="name2" type="text" /></p>  
    <p>密 码：<input name="password2" type="password" /></p>  
    <p><input type="submit" value="提交" /></p>  
    //将隐藏域的 name 属性命名为 userid，而 value 属性的值就对应为用户的 userid  
    <p><input type="hidden" name="userid" value="666" /></p>  
</form>

5. 表单的只读与禁用

<!--表单的只读（eg协议）与禁用（eg先同意协议再注册）设置-->  
<form action="" method="get">  
    <p>用户名：<input type="text" name="name3" value="Xenia(只读)" readonly /></p>  
    <p>  
        用户须知：<br />  
        <textarea cols="20" rows="10" readonly>  
            用户需遵循以下协定（Fatli CO.,LTD.保留最终解释权）：  
            一、xxxxx  
            二、xxxxx  
        </textarea>  
    </p>  
    <p><input type="submit" name="register" value="注册" disabled="disabled"></p>  
</form>

6. 语义化的表单

<!--语义化的表单:页面结构更合理、见名知义、更符合Web标准-SEO优化-->  
  
<!--未使用语义化的标签-->  
<table>  
    学生信息表<br />  
        <tr>  
            <td>姓名</td>  
            <td>职务</td>  
        </tr>  
        <tr>  
            <td >张三</td>  
            <td >班长</td>  
        </tr>  
</table>  
  
<!--使用语义化的标签-->  
<table width="270">  
    <caption>学生信息表</caption>  
        <thead>  
            <tr>  
                <th>姓名</th>  
                <th>职务</th>  
            </tr>  
        </thead>  
        <tbody>  
            <tr>  
                <td align="center">张三</td>  
                <td align="center">班长 </td>  
            </tr>  
        </tbody>  
</table>  
  
<br />  
  
<!--未语义化的表单-->  
<form>  
    用户信息：<br />  
        姓名：<input type="text" />  
        年龄：<input type="text" /><br />  
        手机：<input type="text" />  
        邮箱：<input type="text" />  
</form>  
<br />  
  
<!--语义化的表单-->  
<form>  
    <fieldset>  
    <legend>用户信息：</legend>  
        姓名：<input type="text" />  
        年龄：<input type="text" /><br />  
        手机：<input type="text" />  
        邮箱：<input type="text" />  
    </fieldset>  
</form>

——END

The text was updated successfully, but these errors were encountered:

Qingquan-Li added the 前端技术 label Jan 12, 2017

Qingquan-Li changed the title 表单 HTML_3 表单 Jan 22, 2017

Qingquan-Li mentioned this issue Jan 24, 2017

HTML+CSS 知识结构梳理 #29

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HTML_3 表单 #19

HTML_3 表单 #19

Qingquan-Li commented Jan 12, 2017 •

edited

Loading

HTML_3 表单 #19

HTML_3 表单 #19

Comments

Qingquan-Li commented Jan 12, 2017 • edited Loading

HTML 表单标签

常见的表单元素

表单基本结构 <form> 标签

表单基本元素 <input> 标签

列表框

文本域

关联表单元素（表单元素的标注）

只读属性、禁用属性

附 Demo代码示例

1. 普通表单

2. 多行文本域

3. 文件域

4. 隐藏域（表单数据隐藏提交，用 method="get" 提交可以在地址栏看到提交的参数）

5. 表单的只读与禁用

6. 语义化的表单

Qingquan-Li commented Jan 12, 2017 •

edited

Loading

表单基本结构 `<form>` 标签

表单基本元素 `<input>` 标签