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

必须符合正则表达式

相关推荐
颜酱2 分钟前
用导游的例子来理解 Visitor 模式,实现AST 转换
前端·javascript·算法
蒙特卡洛的随机游走20 分钟前
Spark的宽依赖与窄依赖
大数据·前端·spark
9号达人25 分钟前
if-else 优化的折中思考:不是消灭分支,而是控制风险
java·后端·面试
共享家952727 分钟前
QT-常用控件(多元素控件)
开发语言·前端·qt
葱头的故事29 分钟前
将传给后端的数据转换为以formData的类型传递
开发语言·前端·javascript
_233341 分钟前
vue3二次封装element-plus表格,slot透传,动态slot。
前端·vue.js
jump68044 分钟前
js中数组详解
前端·面试
不知道累,只知道类1 小时前
Java 在AWS上使用SDK凭证获取顺序
java·aws
崽崽长肉肉1 小时前
iOS 基于Vision.framework从图片中提取文字
前端
温宇飞1 小时前
Web Abort API - AbortSignal 与 AbortController
前端