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

必须符合正则表达式

相关推荐
ling__i4 分钟前
java day18
java·开发语言
非ban必选5 分钟前
netty-scoket.io路径配置
java·服务器·前端
じòぴé南冸じょうげん39 分钟前
小程序的project.private.config.json是无依赖文件,那可以删除吗?
前端·小程序·json
渣哥1 小时前
我和Java 8 Stream相爱相杀的那些年
java
爱吃烤鸡翅的酸菜鱼1 小时前
【Spring】原理解析:Spring Boot 自动配置
java·spring boot
小白兔3531 小时前
一文讲通Unicode规范、UTF-8与UTF-16编码及在Java中的验证
java
会豪1 小时前
Electron主进程渲染进程如何优雅的进行通信
前端
jianghaha20111 小时前
前端 Word 模板参入特定数据 并且下载
前端·word
跟橙姐学代码1 小时前
轻松搞定 Python 模块与包导入:新手也能秒懂的入门指南
前端·python·ipython
十八旬1 小时前
苍穹外卖项目实战(day7-1)-缓存菜品和缓存套餐功能-记录实战教程、问题的解决方法以及完整代码
java·数据库·spring boot·redis·缓存·spring cache