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

必须符合正则表达式

相关推荐
耶啵奶膘25 分钟前
uniapp-是否删除
linux·前端·uni-app
魔道不误砍柴功1 小时前
Java 中如何巧妙应用 Function 让方法复用性更强
java·开发语言·python
NiNg_1_2341 小时前
SpringBoot整合SpringSecurity实现密码加密解密、登录认证退出功能
java·spring boot·后端
闲晨1 小时前
C++ 继承:代码传承的魔法棒,开启奇幻编程之旅
java·c语言·开发语言·c++·经验分享
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
测开小菜鸟2 小时前
使用python向钉钉群聊发送消息
java·python·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
P.H. Infinity3 小时前
【RabbitMQ】04-发送者可靠性
java·rabbitmq·java-rabbitmq