百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> html表单的根本元素
分享文章到:

html表单的根本元素

发布时间:09/01 来源:未知 浏览: 关键词:
表单的根本元素

1.我们先看一下表单是啥?几乎每个网站都会有

2.表单给人最直接的印象就是有一些输入框,还有一些按钮

3.这些输入框,可以接受会员输入的数据,按钮可以将会员的数据停止提交

4.表单元素是由一组标签组成的

表单提交方式有许多,最主要的有二种:

1.get方式:这也是默许的方式,会员提交的表单数据全部在url地址上

长处是便于珍藏和反复调取,缺陷是不平安并且数据数目受限制

2.post方式:数据通过恳求头来提交,url地址栏看不到,非常平安,且长度不受限制

get方式非常适合传递不敏锐且长度很短的数据

post方式非常适合传递重要数据且长度不肯定的数据

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3-1表单的根本元素</title>
</head>
<body>
<form action="demo.php" method="get">
<!-- <form action="demo.php" method="post"> -->
<!-- 最重要的输入控件标签是<input>,它有许多类型,是由type属性来指定的 -->
<!-- 1.文本框: 最常见,可以输入文本,常用来输入会员名帐号等 -->
<!-- 由于input是一个内联元素,多个input会在一行显示,所今后面加一个换行标签 -->
<!-- name是输入控件的名称,必然要设定,由于PHP要用它当变量名来猎取表单的数据
value留存的是会员输入的数据,平常保持为空即可 -->
姓名:<input type="text" name="name" value=""> <br>
<!-- 2.密码框: type="password",和文本是一样的,只是会员输入的内容以星号代替 -->
密码:<input type="password" name="password" value=""> <br>
<!-- 3.单选框:望文生义就是每次只能选中一项,例如性别,付款方式等只能选中一个且选项较少的状况 -->
<!-- 单选按钮的name值必需全部一样,才能确保仅返回一个选中 -->
<!-- 可以设定默许选中荐:checked:它是布尔属性,不需要赋值,假如要给值就是它本人 -->
性别:<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="woman">女
<input type="radio" name="sex" value="secret" checked>保密
<br>
<!-- 4.复选框:就是一次可以选中多个数据提交,返回值是一个数组,name属性要加[],确保返回数组 -->
喜好:<input type="checkbox" name="hobby[]" value="movie">看电影
   <input type="checkbox" name="hobby[]" value="game" checked>打游戏
   <input type="checkbox" name="hobby[]" value="cook">做饭
   <input type="checkbox" name="hobby[]" value="wash">洗衣服
   <br>
<!-- 5:下拉列表框:点击后会出一个下拉列表,会员可以选中一个或多个选项 -->
<!-- 下拉列表使用的是select标签,名值对name和value分在二个标签中 -->
<!-- name写在父标签select中,value写在option子标签中,可以用selected属性设定默许值 -->
级别: <select name="level">
<option value="0">纯真的小白</option>
<option value="1">有点污啦</option>
<option value="2" selected>不可一世</option>
<option value="3">宇宙无敌小霸王</option>
</select>
<br>
<!-- 6.文件上传域:accept属性设定同意上传的文件类型,不外这个很少用,应当在效劳器停止推断 -->
头像:<input type="file" name="photo" accept="image/*"> <br>
<!-- 非凡的潜藏域:type="hidden",为什么要用潜藏域呢?
1.有一些数据是主动生成的,不需要会员输入:例如注册时间
2.有一些数据会员是不知道的,例如,会员id
3.后端通过表单向一些页面传数据时使用的主键或关键字 -->
<!-- 在页面看不到潜藏域的东西,但是提交后可以在后台看到通过潜藏域传递过来的数据 -->
<input type="hidden" name="user_id" value="10">
文本域:<textarea name="comment" rows="5" cols="30"></textarea><br>
<!-- 7.提交按钮:type="submit",type="button"是一般按钮,失去提交功效 -->
<input type="submit" name="submit" value="提交">
<input type="button" name="button" value="提交">
<!-- type="reset"可以重置会员数据,复原到最初状态 -->
<input type="reset" name="reset" value="重置">
<!-- 8.提交图像按钮: type="image",默许就是提交功效,与submit功效是一样的 -->
<input type="image" name="submit" src="../images/submit.jpg" width="30">
</form>
</body>
</html>

以上就是html表单的根本元素的具体内容,更多请关注百分百源码网其它相关文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有150人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板