前端基础 input元素 使用lable定义标签 使用button定义按钮 select与option元素 textarea 客户端校验功能

编程语言 2018-12-24 10:20:55 阅读次数: 0

1、input元素

input元素是表单控件元素中功能最丰富的，改变type生成不同的input框

<!DOCTYPE html>
<html>
<head>
 <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
 <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
 <title> 表单 </title>
</head>
<body>
<form action="http://www.crazyit.org" method="get">
 单行文本框：<input id="username" name="username" type="text" /><br />
 不能编辑的文本框：<input id="username2" name="username" type="text"
  readonly="readonly" /><br />
 密码框：<input id="password" name="password" type="password" /><br />
 隐藏域：<input id="hidden" name="hidden" type="hidden" /><br />
 第一组单选框：<br />
 <input id="color" name="color" type="radio" value="red"/>
 <input id="color2" name="color" type="radio" value="green" />
 <input id="color3" name="color" type="radio" value="blue"/><br />
 第二组单选框：<br />
 <input id="gender" name="gender" type="radio" value="male"/>
 <input id="gender2" name="gender" type="radio" value="female" /><br />
 两个复选框：<br />
 <input id="website" name="website" type="checkbox" 
  value="leegang.org" />
 <input id="website2" name="website" type="checkbox" 
  value="crazyit.org" /><br />
 文件上传域：<input id="file" name="file" type="file"/><br />
 图像域：<input type="image" src="images/wjc.gif" alt="疯狂Java联盟"/><br />
 下面是四个按钮：<br />
 <input id="ok" name="ok" type="submit" value="提交" />
 <input id="dis" name="dis" type="submit" value="提交"
  disabled="disabled" />
 <input id="cancel" name="cancel" type="reset" value="重填"/>
 <input id="no" name="no" type="button" value="无动作" />
</form>
</body>
</html>

在这里插入图片描述

2、使用lable定义标签

隐式使用for属性：指定label元素的for属性为所关联表单控件的id属性值
显示关联：将普通文本、表单控件一起放在label元素内部即可

<!DOCTYPE html>
<html>
<head>
 <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
 <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
 <title> label元素 </title>
</head>
<body>
<form action="http://www.crazyit.org" method="get">
 <label for="username">单行文本框：</label>
 <input id="username" name="username" type="text" /><br />
 <label>密码框：<input id="password" name="password" type="password" />
 </label><br />
 <input id='ok' type="submit" value="登录疯狂Java联盟" />
</form>
</body>
</html>

在这里插入图片描述

3、使用button定义按钮

<!DOCTYPE html>
<html>
<head>
 <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
 <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
 <title> button生成按钮 </title>
</head>
<body>
<form action="http://www.crazyit.org" method="get">
 <button type="button"><b>提交</b></button><br />
 <button type="submit"><img src="images/wjc.gif" alt="crazyit.org"/>
  </button><br />
</form>
</body>
</html>

在这里插入图片描述

4、select与option元素

<!DOCTYPE html>
<html>
<head>
 <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
 <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
 <title> select元素 </title>
</head>
<body>
<form action="http://www.crazyit.org" method="post">
 下面是简单下拉菜单：<br />
 <select id="skills" name="skills">
  <option value="java">Java语言</option>
  <option value="c">C语言</option>
  <option value="ruby">Ruby语言</option>
 </select><br /><br /><br />
 下面是允许多选的列表框：<br />
 <select id="books" name="books" 
  multiple="multiple" size="4">
  <option value="java">疯狂Java讲义</option>
  <option value="android">疯狂Android讲义</option>
  <option value="ee">轻量级Java EE企业应用实战</option>
 </select><br />
 下面是允许多选的列表框：<br />
 <select id="leegang" name="leegang" 
  multiple="multiple" size="6">
  <optgroup label="疯狂Java体系图书">
   <option value="java" label="aaaaaaaa">疯狂Java讲义</option>
   <option value="android">疯狂Android讲义</option>
   <option value="ee">轻量级Java EE企业应用实战</option>
  </optgroup>
  <optgroup label="其他图书">
   <option value="struts">Struts 2.1权威指南</option>
   <option value="ror">RoR敏捷开发最佳实践</option>
  </optgroup>
 </select><br />
 <button type="submit"><b>提交</b></button><br />
</form>
</body>
</html>
</html>

在这里插入图片描述

5、textarea

<!DOCTYPE html>
<html>
<head>
 <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
 <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
 <title> 多行文本域 </title>
</head>
<body>
<form action="http://www.crazyit.org" method="post">
 简单多行文本域：<br />
 <textarea cols="20" rows="2"></textarea><br />
 只读的多行文本域：<br />
 <textarea cols="28" rows="4" readonly="readonly">
疯狂Java讲义
轻量级Java EE企业应用实战
 </textarea><br />
 <button type="submit"><b>提交</b></button><br />
</form>
</body>
</html>

在这里插入图片描述

6、各种input

<!DOCTYPE html>
<html>
<head>
 <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
 <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
 <title> 功能丰富的input元素 </title>
</head>
<body>
<form action="do">
type="color"的文本框:<br/><input name="color" type="color"/><p>
type="date"的文本框:<br/><input name="date" type="date"/><p>
type="time"的文本框:<br/><input name="time" type="time"/><p>
type="datetime"的文本框:<br/><input name="datetime" type="datetime"/><p>
type="datetime-local"的文本框:<br/><input name="datetime-local" type="datetime-local"/><p>
type="month"的文本框:<br/><input name="month" type="month"/><p>
type="time"的文本框:<br/><input name="time" type="time"/><p>
type="week"的文本框:<br/><input name="week" type="week"/><p>
type="email"的文本框:<br/><input name="email" type="email" multiple/><p>
type="tel"的文本框:<br/><input name="tel" type="tel"/><p>
type="url"的文本框:<br/><input name="url" type="url"/><p>
type="number"的文本框:<br/><input name="number" type="number"/><p>
type="range"的文本框:<br/><input name="range" type="range" min="0" max="100" step="5"/><p>
type="search"的文本框:<br/><input name="search" type="search"/><p>
<input value="提交" type="submit"/>
</form>
</body>
</html>

在这里插入图片描述

7、客户端校验功能

使用校验属性就行校验

<!DOCTYPE html>
<html>
<head>
 <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
 <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
 <title> 通过属性进行校验 </title>
</head>
<body>
<form action="add">
 图书名：<input name="name" type="text" required/><br/>
 图书ISBN：<input name="isbn" type="text"
  required pattern="\d{3}-\d-\d{3}-\d{5}"/><br/>
 图书价格：<input name="price" type="number" 
  min="20" max="150" step="5"/><br/>
 <input type="submit" value="提交"/>
</form>
</body>
</html>

在这里插入图片描述调用checkValidity方法进行校验

<!DOCTYPE html>
<html>
<head>
 <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
 <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
 <title> 通过checkValidity进行校验 </title>
</head>
<body>
<form action="add">
 生日：<input id="birth" name="birth" type="date"/><br/>
 邮件地址：<input id="email" name="email" type="email"/><br/>
 <input type="submit" value="提交" onclick="return check();"/>
</form>
<script type="text/javascript">
 var check = function()
 {
  return commonCheck("birth" , "生日" , "字段必须是有效的日期！")
   && commonCheck("email" , "邮件地址" , "字段必须符合电子邮件的格式！");
 }
 var commonCheck = function(field , fieldName , tip)
 {
  var targetEle = document.getElementById(field);
  // 如果该字段的值为空
  if (targetEle.value.trim() == "")
  {
   alert(fieldName + "字段必须填写！");
   return false;
  }
  // 调用checkValidity()方法执行输入校验
  else if(!targetEle.checkValidity())
  {
   alert(fieldName + tip);
   return false;
  }
  return true;
 }
</script>
</body>
</html>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/wbs925zxh/article/details/85229524
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
OOP第二次作业
java web 乱码问题
android 禁止scrollview 因控件变化自动滚动到底的方法
mysql服务解压版的安装(5.7)
centos7 nginx+tomcat配置https 安装免费SSL Let’s Encrypt
使用Mosquitto遗嘱机制实现感知客户端上下线功能的方法
面向对象之------多态与多态性
开发Teams Tabs应用程序
C# 希尔排序
第2章 Jupyter Notebooks
每日归档
更多
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022