HTML5 表单详解-优快云博客

本文链接：https://blog.youkuaiyun.com/CSMCZM/article/details/106759297

本文详细介绍了HTML5中的表单元素，包括不同类型的输入字段如文本框、密码框、单选按钮、复选框、列表框、按钮等。还讨论了表单的提交方式、验证方法以及隐藏域和只读、禁用属性。此外，提到了表单元素的标注和初级验证，如placeholder、required和pattern属性的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单

表单语法

<form  method="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>

method=“post” <! --规定如何发送表单数据常用值：get | post–>

1.GET请求，请求的数据会附加在URL之后，以?分割URL和传输数据，多个参数用&连接。

2.POST请求：POST请求会把请求的数据放置在HTTP请求包的包体中.

3.POST的安全性比GET的高。

4.使用GET请求时，传输数据会受到URL长度的限制。

action=“result.html” <! --表示向何处发送表单数据–>

在实际网页开发中通常采用post方式提交表单数据

表单元素格式

<input  type="text"  name="fname" value="text"/>

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" />

type=“text” <! --文本框–>

name=“userName” <! --文本框名称–>

value=“用户名” <! --文本框初始值–>

size=“30” <! --文本框长度–>

maxlength=“20” <! --文本框可输入最多字符–>

密码框

语法

<input  type="password "  name="pass"  size="20" />

type="password " <! --密码框–>

name=“pass” <! --密码框的名称–>

size=“20” <! --密码框的长度–>

单选按钮

语法

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

type=“radio” <! --单选按钮框–>

value=“男” <! --值–>

checked <! --单选按钮选中状态–>

复选框

语法

<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏

type=“checkbox” <! --复选框–>

value=“sports” <! --值–>

checked <! --复选框选中状态–>

列表框

语法

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

select <! --列表框–>

selected=“selected” <! --默认选中项–>

option <! --选项–>

按钮

语法

<input  type="reset" name="butReset" value="reset按钮">
<input  type="submit" name="butSubmit" value="submit按钮">
<input  type="button" name="butButton" value="button按钮"/>

type=“reset” <! --重置按钮–>

type=“submit” <! --提交按钮–>

value=“submit按钮” <! --按钮上显示的文字–>

type=“button” <! --普通按钮–>

图片按钮

语法

<input  type="image"  src="images/login.gif" />

type=“image” <! --图片按钮–>

src=“images/login.gif” <! --图片路径–>

多行文本域

语法

<textarea  name="showText"  cols="x"  rows="y">文本内容 </textarea  >

< textarea ></ textarea > <! --多行文本域 -->

cols=“x” <! --显示的列数–>

rows=“y” <! --显示的行数–>

文件域

语法

<form action="" method="post" enctype="multipart/form-data">
  <p><input type="file" name="files" />
  <input type="submit" name="upload" value="上传" /></p>
</form>

type=“file” <! --文件域–>

enctype=“multipart/form-data” <! --表单编码属性–>

邮箱

语法

<p>邮箱:<input type="email"  name="email"/></p>
<input type="submit"/>

type=“email” <! --邮箱–>

会自动验证Email地址格式是否正确

网址

语法

  <p>请输入你的网址:<input type="url"  name="userUrl"/></p>
  <input type="submit"/>

type=“url” <! --网址–>

会自动验证URL地址格式是否正确

数字

语法

<p>请输入数字:<input type="number"  name="num" min="0" max="100" step="10"/></p>
<input type="submit"/>

type=“number” <! --数字–>

min=“0” <! --允许的最小值–>

max=“100” <! --允许的最大值–>

step=“10” <! --合法的数字间隔–>

滑块

语法

<p>请输入数字:<input type="range"  name="range1" min="0" max="10" step="2"/></p>
<input type="submit"/>

type=“range” <! --滑块–>

min=“0” <! --允许的最小值–>

max=“10” <! --允许的最大值–>

step=“2” <! --合法的数字间隔–>

搜索框

语法

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

type=“search” <! --搜索框–>

表单的高级应用

1.隐藏域

2.只读

3.禁用

隐藏域

语法

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

type=“hidden” <! --隐藏域–>

只读和禁用

语法

   <input name="name" type="text" value="张三"  readonly>
    <input type=“submit ”  disabled value="保存" >

readonly <! --只读文本框–>

disabled <! --禁用–>

W3C HTML5标准中，规定对于布尔类型的属性，属性值可以省略

表单元素的标注

1.增强鼠标的可用性

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

语法

<label for="id">标注的文本</label>
<input type="radio" name="gender" id="male"/>

for=“id” <! --表单元素的id–>

id=“male”/> <! --表单元素id–>

表单的初级验证

表单验证的好处

1.减轻服务器的压力

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

表单初级验证的方法

1.placeholder

2.required

3.pattern

placeholder

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

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

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

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

语法

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

placeholder=“请输入要搜索的关键字” <! --文本框输入内容提示–>

required

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

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

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

required <! --必填项–>

pattern

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

2.正则表达式图形化解析网址：http://regexper.com/#

语法

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

pattern="^1[358]\d{9}" <! --验证规则，正则表达式–>