热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

表单简介及应用

按钮、多选框、文本框、单选框、列表框文本域、文件域、

1.初始表单post和get提交

表单元素格式



































属性说明
type指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image、button,默认text
name指定表单元素的名称
value元素的初始值。type为radio时必须指定一个值
size指定表单元素的初始宽度。但type为text或password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位。
maxlengthtype为text或password时,输入的最大字符数
checkedtype为radio或checkbox时,指定按钮是否被选中

2.表单的内容

按钮、多选框、文本框、单选框、列表框文本域、文件域、搜索框滑块、简单验证

3.表单的应用


表单的应用



  • 隐藏域:hidden

  • 只读:readonly

  • 禁用:disabled


4.表单初级验证


表单初级验证



  • 常用方式

    • placeholder:提示信息

    • required:非空判断

    • pattern:正则表达式


DOCTYPE html>
<html lang=""en"">
<head>
<meta charset=""UTF-8"">
<title>表单title>
head>
<body>
<h1>注册h1>

<form action=""1.初始网页.html"" method=""get"">



<p> 名字: <input type=""text"" name=""username"" placeholder=""请输入用户名"" required> p>

<p> 密码: <input type=""password"" name=""password"" placeholder=""请输入密码"">p>

<p>性别:
<input type=""radio"" value=""boy"" name=""sex""/>
<input type=""radio"" value=""girl"" name=""sex"">
p>

<p>爱好:
<input type=""checkbox"" value=""sleep"" name=""hobby"">睡觉
<input type=""checkbox"" value=""code"" name=""hobby"">敲代码
<input type=""checkbox"" value=""chat"" name=""hobby"">聊天
<input type=""checkbox"" value=""game"" name=""hobby"">游戏
p>

<p>按钮:
<input type=""button"" name=""btn1"" value=""点击"">

p>

<p>下拉框:
<select name=""列表名称"">
<option value=""china"">中国option>
<option value=""us"">美国option>
<option value=""se"">瑞士option>
<option value=""uk"">英国option>
select>
p>

<p>反馈:
<textarea name=""textarea"" cols=""30"" rows=""10"">文本内容textarea>
p>

<p>上传文件:
<input type=""file"" name=""files"">
p>

<p>邮件验证:
<input type=""email""name=""email"">
p>

<p>URL:
<input type=""url"" name=""URL"">
p>

<p>数字:
<input type=""number"" name=""number"" max=""100"" min=""0"" step=""1"">
p>

<p>滑块:
<input type=""range"" name=""voice"" min=""0"" max=""100"" step=""1"">
p>

<p>
<input type=""search"" name=""search"">
p>

<p>
<label for=""mark"">你点我试试label>
<input type=""text"" id=""mark"">
p>
<p>

<input type=""submit"">
<input type=""reset"" value=""清空表单"">
p>
form>
body>
html>

推荐阅读
author-avatar
老翅几回寒_332
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有