HTML的表单

1.表单的基本结构

<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="提交"/></p>

<p><input type="submit" name="button" value="提交"/></p>

</form>

2.表单的元素

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

|---------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 属性 | 说明 |
| type | 指定元素的类型。textpasswordcheckboxradiosubmitresetfilehiddenimagebutton默认为text |
| size | 指定表单元素的初始宽度。typetextpassword,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位 |
| maxlength | **typetextpassword时,输入的最大字符数 |
| checked | **type
radiocheckbox**时,**指定按钮是否是被选中 |

3.文本框

<input type="text" name="userName" value="用户名" size="30" maxlength="20" />

size长度 maxlength可输入最多字符

4.密码框

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

5.单选按钮

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

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

6.复选框

<input type="checkbox" name="interest" value="sports"/>运动

<input type="checkbox" name="interest" value="talk" checked />聊天

<input type="checkbox" name="interest" value="play"/>玩游戏

7.文件域

<form action="" method="post" enctype="multipart/form-data">

<p><input type="file" name="files" />

<input type="submit" name="upload" value="上传" /></p>

</form>

8.按钮

<input type="button" name="butButton" value="button按钮"/>

<input type="submit" name="butSubmit" value="submit按钮">

<input type="reset" name="butReset" value="reset按钮">

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

9.邮箱

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

10网址

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

<input type="submit"/>

11.数字

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

<input type="submit"/>

step合法的数字间隔

12.滑块

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

<input type="submit"/>

13.搜索框

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

<input type="submit"/>

14.下拉列表框

<select name="列表名称" size="行数">

<option value="选项的值" selected="selected">...</option >

<option value="选项的值">...</option >

</select>

15.多行文本域

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

16表单的高级应用

隐藏域 <input type="hidden" value="666" name="userid">

只读属性 readonly <input name="name" type="text" value="张三" readonly>

禁用属性disable <input type="submit " disabled value="保存" >

17.表单的标注

增强鼠标的可用性,自动将焦点转移到与该标注相关的表单元素上

<label for="id">标注的文本</label>

<input type="radio" name="gender" id="male"/>

18.表单的初级验证

placeholder

input类型的文本框提供一种提示(hint)

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

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

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

required

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

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

pattern

必须符合正则表达式

相关推荐
GISer_Jing1 分钟前
React核心功能详解(一)
前端·react.js·前端框架
捂月4 分钟前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
繁依Fanyi9 分钟前
简易安卓句分器实现
java·服务器·开发语言·算法·eclipse
深度混淆12 分钟前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China13 分钟前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q13 分钟前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海14 分钟前
Chrome离线安装包下载
前端·chrome
慧都小妮子20 分钟前
Spire.PDF for .NET【页面设置】演示:打开 PDF 时自动显示书签或缩略图
java·pdf·.net
m512725 分钟前
LinuxC语言
java·服务器·前端
IU宝29 分钟前
C/C++内存管理
java·c语言·c++