HTML表单元素基本用法

来源：互联网发布：知乎帖子怎么删除编辑：程序博客网时间：2024/05/29 16:20

HTML表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio)、复选框(checkboxes)等等。

表单的标签是<form>：

<form>

表单的输入元素

</form>

--------------------------------------------------------------------------------------------------------------------------------------

表单的输入元素

通常情况下表单是使用输入标签<input> 他是一个自闭和标签

输入的类型是由type定义的，通常使用的有：

文本输入框：<input type="text">

密码输入框：<input type="password">

单选框：<input type="radio">

复选框：<input type="checkbox">

搜索框：<input type="search">

滑动条：<input type="range" min="" max="" step="">

颜色框：<input type="color">

日期选择：<input type="date">

邮箱：<input type="email">

数字：<input type="number" min="最小值" max="最大值" step="间隔">

提交按钮：<input type="submit">

重置按钮：<input type="reset">

普通按钮：<input type="button">

图片按钮：<input type="image" src="" width="" height="">

文件域：<input type="file>

下拉列表元素是一个标签组：

</select>

多行文本域：

只读属性：readonly

禁用属性：disabled

隐藏域：

表单的标注：<label></label>

例如：

表单的验证：

placeholder是提请用户placeholder=""

required 如果没有填写内容就不允许提交

pattern 检测输入的内容与正则表达式相匹配 pattern="正则表达式"

下面是一个简单的注册页面的例子：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表单</title></head><body><h2>欢迎注册本页面</h2><form action="iframe的用法.html"method="get"target="_blank"enctype="multi/form-data"><p>请出入你的用户名：<input type="text"name="username"></p><!--没有name就没有就安全？!--><p>请输入你的密码：<input type="password"name="psw" placeholder="mima"></p><p>请选择你的性别<input type="radio"name="sex"checked="checked">男<input type="radio"name="sex">女</p><p>请选择感兴趣的标签<input type="checkbox"name="like"id="sport"><label for="sport">运动</label><input type="checkbox"name="like">音乐<input type="checkbox"name="like">唱歌<input type="checkbox"name="like">旅行<input type="checkbox"name="like">美食<input type="checkbox"name="like">睡觉</p><p>请选择最喜欢的颜色<input type="color"></p><p>请选择出生日期<input type="date"></p><p>请选择您所在的城市：<select name="" id=""><option value="">武汉</option><option value="">北京</option><option value="">郑州</option><option value="">天津</option><option value="">上海</option></select></p><p>个性签名：<textarea name="" id="" cols="30" rows="10">展示自己</textarea><!--默认写上去的!--></p><p>上传照片<input type="file"></p><p>邮箱<input type="email"></p><p>工资<input type="number"min="100" max="1000000" step="500"></p><p>请输入搜索关键字<input type="search"name=""><input type="submit" value="GO"></p><p>滑动条：<input type="range"min="0"max="100"step="1"></p><p><input type="submit"><input type="button"value="点我"><input type="reset"><input type="image"src="D:\develope\images\16.jpg" alt=""width="100"heiht="25"></p></form><form action=""></form><form action=""></form></body></html>

阅读全文

2 0

HTML表单元素基本用法

HTML表单

表单的输入元素

文本输入框：<input type="text">

密码输入框：<input type="password">

单选框：<input type="radio">

复选框：<input type="checkbox">

搜索框：<input type="search">

滑动条：<input type="range" min="" max="" step="">

颜色框：<input type="color">

日期选择：<input type="date">

邮箱：<input type="email">

数字：<input type="number" min="最小值" max="最大值" step="间隔">

提交按钮：<input type="submit">

重置按钮：<input type="reset">

普通按钮：<input type="button">

图片按钮：<input type="image" src="" width="" height="">

文件域：<input type="file>

下拉列表元素 是一个标签组：

多行文本域：

只读属性：readonly

禁用属性：disabled

隐藏域：

表单的标注：<label></label>

表单的验证：

下拉列表元素是一个标签组：