使用表单
网页中表单的使用比较重要，常见的例如注册表，调查表，留言表等……
了解概述（what）
表单主要用于收集网页上浏览者输入的相关信息，标记为<form></form>
表单的基本格式如下：
<form action="url" method="get|post" enctype="mime"></form>
action用来中指定处理提交表单的格式，它可以是一个URL地址，或是一个Email地址
method指明提交表单的HTTP方法
enctype指明用来把表单提交给服务器时的互联网媒体形式
手撕代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form> 用户登录<br/> 用户名 <input type="text" name="liu"><br/> 密码 <input type="password" name=" password"><br/> <input type="submit" value="登录"> </form> </body> </html>
效果：
表单基本元素的使用
表单元素是能让用户在表单中输入信息的元素，常见的有文本框，密码框，下拉菜单，单选框，复选框等……
单行文本输入框text
代码格式：
实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form> 请输入姓名： <input type="text" name="duyiwuer" size="20" maxlength="10" value="花里胡哨"><br/> 请输入地址： <input type="text" name="duyiwu" size="20" maxlength="30" value="花里胡哨"> </form> </body> </html>
多行文本框标记textarea
多行文本框标记<textarea>主要用于输入较长的文本信息
代码格式：
<textarea name="" clos="" rows="" wrap=""></textarea> <!--name属性：同上必须独一无二，才能保证数据采集准确 clos属性：定义多行文本框的宽度，单位是单个字符宽度 rows属性：定义多行文本框的高度，单位是单个字符高度 wrap属性：当输入内容大于文本域时显示的方式 -->
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form> 请评论<br/> <textarea name="duyiwuer" cols="50" rows="5" wrap="soft"></textarea> <br/> <input type="submit" value="发送"> </form> </body> </html>
效果：
密码输入框password
密码输入框是一个特殊的文本域，主要用于输入一些保密的信息。当用户输入文本时，显示的是黑点或其他符号，这样就使安全性提高了，用户：“爷满离”😀
代码格式:
<input type="password" name="" size="" maxlenth="">
效果感人🤪
单选按钮radio
单选按钮主要是让网页用户在一组选择里只能选一个
代码格式:
<input type="radio" name="" value=""> name属性定义单选按钮的名字,单选按钮都是以组为单位使用的,在同一组中的单选按钮都必须是同一个名字 value属性定义单选按钮的值,在同一组中他们的值必须是不同的
手撕代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form> 你觉得我帅不帅？ <br/> <input type="radio" name="shu" value="shu1">超级帅<br/> <input type="radio" name="shu" value="shu2">很帅<br/> <input type="radio" name="shu" value="shu3">帅<br/> <input type="radio" name="shu" value="shu4">比我帅<br/> </form> </body> </html>
效果如下:
吼吼😄
复选框checkbox
复选框主要完成一组选项里可以同时选择多个选项的操作,每个复选框都是一个独立的元素,都必须有一个唯一的名称.
代码格式:
<input type="checkbox" name="" value=""> type="checkbox" 定义复选框 name属性 定义复选框的名称,在同一组中的复选框都必须用同一个名称 value属性 定义复选框的值
实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form> 你觉得我帅不帅？ <br/> <input type="checkbox" name="shu" value="shu1">超级帅<br/> <input type="checkbox" name="shu" value="shu2">很帅<br/> <input type="checkbox" name="shu" value="shu3">帅<br/> <input type="checkbox" name="shu" value="shu4">比我帅<br/> </form> </body> </html>
效果:
怎么样 吼吼!😎
对了,默认选中项需要设置checked比如上面的代码稍微改动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form> 你觉得我帅不帅？ <br/> <input type="checkbox" name="shu" value="shu1">超级帅<br/> <input type="checkbox" name="shu" value="shu2">很帅<br/> <input type="checkbox" name="shu" value="shu3">帅<br/> <input type="checkbox" name="shu" value="shu4" checked>比我帅<br/> </form> </body> </html>
效果:
选择列表标记select
选项列表标记主要用于在有限的空间里设置多个选项,既可以用作单选,也可以多选.
代码格式如下:
<select name="" size="" multiple> <option value="" selected> </option> </select>
name属性定义选择列表的名称
size属性定义选择列表的行数
multiple属性表示可以多选,如果不设置则表示只能单选
value属性定义选择项的值
selected属性表示默认已经已经选择本选项
例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <select name="liu" size="4" multiple> <option value="sen1" selected>C <option value="sen2" >Java <option value="sen3" >python <option value="sen4" >C# <option value="sen5" >go <option value="sen6" >PHP </option> </select> </body> </html>
效果：
普通按钮button
普通按钮用来控制其他定义了脚本的处理工作
代码格式：
<input type="button" name="" value="" onclick=""/> <!-- type="button" 定义普通按钮 --> <!-- name属性定义普通按钮的名称 --> <!-- value属性定义按钮的显示文字--> <!-- onclick属性表示单击行为，也可以通过脚本函数来定义按钮的行为 -->
实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="button" name="ad" value="提示" onclick="aa()"/> <script> function aa(){ alert("提示了"); } </script> </body> </html>
效果：
提交按钮
提交按钮用来将输入的信息提交到服务器
代码格式：
<input type="submit" name="" value="">
实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="https://editor.csdn.net/md?articleId=117930251" method="GET"> 姓名:<input type="text" name="as"> <br/> 地址：<input type="text" name="asd"> <br/> <input type="submit" value="提交"> </form> </body> </html>
通过提交按钮可以将表单里的信息提交给表单里action所指向的文件
重置按钮reset
重置按钮用来清空表单中的信息
代码格式:
<input type="reset" name="" value="" >
实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form> 用户名称： <input type="text"> <br/> 用户密码： <input type="password"> <br/> <input type="submit" value="登录"> <input type="reset" value="重置"> </form> </body> </html>
效果:
点击重置后
表单高级元素的使用
除了基本属性外,HTML5中还有一些高级属性,包括url,email,time,range,search等…
URL属性
URL属性用于说明网站网址,显示为在一个文本框中输入URL地址.在提交表单时会自动验证URL的值
实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form> <br/> 请输入网址： <input type="url" name="use"/> </form> </body> </html>
效果:
用户输入网址,按下enter键,如果输入网址不正确会弹出提示
Email属性
和URL差不多,只不过这个用来判断是否正确输入了Email的值
直接上代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form> <br/> 请输入Emali： <input type="email" name="use"/> </form> </body> </html>
效果:
date和times属性
HTML5新增了一些日期和时间的输入类型,其中有
date 选取日,月,年
month 选取月,年
week 选取周和年
time 选取时间
datetime 选取时间,日,月,年
datetime-local 选取时间,日,月,年(本地时间)
上述属性代码雷同
以date为例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form> <br/> 请输入生日： <input type="date" name="ds"/> </form> </body> </html>
效果：
非常的贴心nice
number属性
number属性提供了一些输入数字的输入类型，用户可以直接输入数字或者通过单击微调框中的按钮选择数字。
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form> <br/> 大辣条 <input type="number" name="latiao"/>包 </form> </body> </html>
效果：
在这建议用max和min属性来规定输入的最大值和最小值
<input type="number" name="latiao" max="3" min="0"/>包
range属性
range属性可以显示一个滚动的控件，和number属性一样，有max，min，和step属性设置控件的范围
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form> <br/> 今天，你的颜值得分是： <input type="range" name="as" min="0" max="100" /> </form> </body> </html>
效果：
required属性
requirde属性规定必须在提交之前填写（不可空白）
它适用于以下属性的：text,search,url,email,password,date,pickers,number,checkbox,radio等
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form> 输入用户登录信息 <br/> 用户名称： <input type="text" name="qw" required="required"> <br/> 用户密码： <input type="password" name="as" required> <br/> <input type="submit" value="登录"> </form> </body> </html>
效果：
实践：制作用户反馈表
源码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> form{ font-size: 24px; color: rgb(253, 5, 5); } </style> </head> <body> <h1 align=center>用户反馈表</h1> <form> <br/> 姓 名： <input type="text" name="qw" size="12" maxlength="12" required="required"> <br/> 性 别： <input type="radio" name="as" value="as1">男 <input type="radio" name="as" value="as2">女 <input type="radio" name="as" value="as3">人妖 <br/> 年 龄： <input type="number" name="nain" max="160" min="8"/> <br/> phone： <input type="number"> <br/> 请输入你对网站有什么建议： <br/> <textarea name="df" cols="50" rows="10"></textarea> <br/> <input type="submit" name="hj" value="提交"/> <input type="reset" name="fg" value="重置"/> </form> </body> </html>
效果：
最后，文件上传框是不是也很使用呀
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form> 请上传文件： <br/> <input type="file" name="c" size="" maxlength="" /> </form> </body> </html>
效果：
