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

必须符合正则表达式

相关推荐
武子康17 分钟前
Java-72 深入浅出 RPC Dubbo 上手 生产者模块详解
java·spring boot·分布式·后端·rpc·dubbo·nio
_殊途1 小时前
《Java HashMap底层原理全解析(源码+性能+面试)》
java·数据结构·算法
椰椰椰耶2 小时前
【Spring】拦截器详解
java·后端·spring
没有bug.的程序员3 小时前
JAVA面试宝典 - 《MyBatis 进阶:插件开发与二级缓存》
java·面试·mybatis
brzhang3 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止3 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms3 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登3 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in4 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
没有羊的王K4 小时前
SSM框架学习——day1
java·学习