HTML--表单（转载）

最新推荐文章于 2023-07-14 19:00:42 发布

sdsjx01

最新推荐文章于 2023-07-14 19:00:42 发布

阅读量142

点赞数

分类专栏： HTML 文章标签：表单 html

HTML 专栏收录该内容

7 篇文章

订阅专栏

表单语法
<form method="post"（规定如何发送表单数据常用值：get|post）
action="result.html">（表示向何处发送表单数据）
<p> 名字：<input name="name" type="text" > </p>
<p> 密码：<input name="pass" type="password" > </p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重填“/>
</p>
</form>
经验：在实际网页开发中通常采用post方式提交表单数据

表单元素格式
语法：

<input type="text"（input元素类型）name="fname"（input元素名称）
value="text"（input元素的值）/>
属性

说明

type

指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text

name

指定表单元素的名称

value

元素的初始值。type 为 radio时必须指定一个值

size

指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位

maxlength

type为text 或 password 时，输入的最大字符数

checked

type为radio或checkbox时，指定按钮是否是被选中

表单元素
文本框-语法

<input type="text"(文本框) name="userName"(文本框名称) value="用户名"(文本框初始值) size="30"(文本框长度) maxlength="20"(文本框可输入最多字符) />
密码框-语法

<input type="password "(密码框) name="pass"(密码框的名称) size="20"(密码框的长度) />
单选按钮-语法

<input name="gen" type="radio"(单选按钮框) value="男"(值) checked(单选按钮选中状态) />男
<input name="gen" type="radio" value="女" />女
复选框-语法

<input type="checkbox"(复选框) name="interest" value="sports"(值)/>运动
<input type="checkbox" name="interest" value="talk" checked(复选框选中状态) />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏
列表框-语法

<select(列表框) name="列表名称" size="行数">
<option value="选项的值" selected="selected"(默认选中项)>…</option >
<option(选项) value="选项的值">…</option >
</select>
按钮-语法

<input type="reset" (重置按钮) name="butReset" value="reset按钮"(按钮上显示的文字)>
<input type="submit"(提交按钮) name="butSubmit" value="submit按钮">
<input type="button"(普通按钮) name="butButton" value="button按钮"/>

图片按钮

<input type="image" src="images/login.gif"/(图片路径)>
多行文本域-语法

<textarea(多行文本域) name="showText" cols="x"(显示的列数) rows="y"(显示的行数)>文本内容 </textarea >
文件域-语法

<form action="" method="post" enctype="multipart/form-data"（表单编码属性）>
<p><input type="file"(文件域) name="files" />
<input type="submit" name="upload" value="上传" /></p>
</form>
邮箱-语法

<p>邮箱:<input type="email"（邮箱） name="email"/></p>
<input type="submit"/>
注意：会自动验证Email地址格式是否正确

网址-语法

<p>请输入你的网址:<input type="url"（网址） name="userUrl"/></p>
<input type="submit"/>
注意：会自动验证URL地址格式是否正确

数字-语法

<p>请输入数字:<input type="number"(数字) name="num" min="0"(允许的最小值) max="100"(允许的最大值) step(合法的数字间隔)="10"/></p>
<input type="submit"/>
滑块-语法

<p>请输入数字:<input type="range"(滑块) name="range1" min="0"(允许的最小值) max="10"(允许的最大值) step(合法的数字间隔)="2"/></p>
<input type="submit"/>
搜索框-语法

<p>请输入搜索的关键词:<input type="search"(搜索框) name="sousuo"/></p>
<input type="submit"/>

表单的高级应用
隐藏域-语法

<input type="hidden"(隐藏域) value="666" name="userid">
只读和禁用-语法

<input name="name" type="text" value="张三" readonly(只读文本框)>
<input type="submit " disabled （禁用） value="保存" >
表单元素的标注

1.增强鼠标的可用性

2.自动将焦点转移到与该标注相关的表单元素上

语法

<label for="id"(表单元素的id)>标注的文本</label>
<input type="radio" name="gender" id="male"/(表单元素id)>

表单的初级验证
表单验证的好处

1.减轻服务器的压力

2.保证数据的可行性和安全性

表单初级验证的方法

1.placeholder 2.required 3.pattern

placeholder

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

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

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

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

语法：

required

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

2.适合于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}" />
---------------------
作者：北方的南先生
来源：优快云
原文：https://blog.youkuaiyun.com/nanjinzhu/article/details/82251110