HTML表单语法结构

“我相信，我写过的每一行代码，都是蝴蝶翅膀的一次震动，最终能在混沌之中掀起飓风。”

表单语法

<form method="post" action="xxxx.html">
<!-- 其中"post"可以代换为：get(实际开发中通常采用post）
     method规定如何发送表单数据,action：表示将表单发送到哪里 -->
<!-- 各种表单元素 -->
</form>

表单元素 

<input type="text" name="fname" value="text"/>
<!--
    type=input元素的类型
    name=input元素的名称
    value=input元素的值
-->

属性	说明
type	指定元素的类型。text、password、checkbox（复选框）、radio（单选）、submit（提交）、reset（重置）、file（文件）、hidden（隐藏）、image 和 button（按钮），默认为 text
size	指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text 或 password 时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中

文本框：

        <input type="text" />

密码框：

        <input type="password" />

单选框：

        <input type="radio" name="gen" value="男"/>男

        <input type="radio" name="gen" value="女"/>女

        使用场景：多个选项最多只能选择一项

备注：

        1、多个选项只选其中一项时，每个单选框的name值必须一致

        2、必须要有value值

        3、若某个选项为默认选中时，需要给该项添加checked属性：

        <input type="radio" name="gen" value="男" checked/>男

复选框：

        <input type="checkbox" name="hobby" value="篮球" />篮球

        <input type="checkbox" name="hobby" value="足球" />足球

        <input type="checkbox" name="hobby" value="羽毛球" />羽毛球

        使用场景：多个选项可以选择多个

备注：

        1、多个选项可以多选时，每个单选框的name值必须一致

        2、必须要有value值

        3、若某个选项为默认选中时，需要给该项添加checked属性：

        <input type="checkbox" name="hobby" value="羽毛球" checked />羽毛球

文件域：

        <input type="file" />

邮件框：

        <input type="email" />

       备注：若输入内容，当提交表单时，会自动校验内容是否符合邮箱格式.

地址框：

        <input type="url" />

备注：

        若输入内容，当提交表单时，会自动校验内容是否符合url地址格式

        url地址需要包含http://或https://

数字框：

        <input type="number" />

备注：

        只能输入数字以及表示数字的符号，比如小数点，+ -

滑块：

        <input type="range" />

        使用场景：进度展示、长度展示

下拉列表：

        <select>

                <option value="选项一">选项一</option>

                <option value="选项二">选项二</option>

                 ...

                <option value="选项N">选项N</option>

        </select>

使用场景：多个选项组合为一个结果时，使用下拉列表，如：年月日、地址、级联菜单等联合选项

备注：

        <select>标签中必须要有<option>作为选项，否则是空下拉列表

        <option>标签必须要有value属性，<option></option>中间必须要写文本值，且value值要与文本值一致

        若下拉列表中某项默认被选中，需要在该项(option)中添加selected属性：

<select>

        <option value="选项一">选项一</option>

        <option value="选项二" selected>选项二</option>

        ...

        <option value="选项N">选项N</option>

</select>

日期框：

        年月日：

                <input type="date" />

        年月日时分秒

                <input type="datetime-local" />

文本域：

        <textarea></textarea>

普通按钮：

        <input type="button" value="提交"/>

        备注：必须要有value值，否则按钮无提示

图片按钮：

        <input type="image" src=""/>

        备注：

        图片按钮必须要有src值，否则按钮不显示图片

        图片按钮自带提交表单的效果

提交按钮：

        <input type="submit"/>

        备注：

        若不写value值，默认显示为“提交”

        具有提交表单的效果

提交按钮：

        <input type="reset"/>

        备注：

        若不写value值，默认显示为“重置”

        点击重置按钮会将表单内容恢复到初识状态

搜索框：

        <input type="search"/>

表单高级特性

隐藏域：

        <input type="hidden" value="666" name="userid">

只读属性：readonly

        <input name="name" type="text" value="张三" readonly>

禁用属性：disabled

        <input type="submit" disabled value="保存">

表单初级验证的方法

placeholder

input 类型的文本框提供一种提示（ hint ）

可以描述文本框期待用户输入何种内容

提示语默认显示，当文本框中输入内容时提示语消失

适合于 input 标签： text 、 search 、 url 、 email 和 password 等类型

<input type="search" placeholder="请输入要搜索的关键字"/>

文本框输入内                容提示  

required

规定文本框填写内容不能为空，否则不允许用户提交

适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

<input type="text" name="username"  required/>

pattern

用户输入的内容必须符合 正则表达式所指的规则 ，否则就不能提交表单

<input type="text" name="tel"  required pattern="^1[358]\d{9}" />