您的位置：首页 > Web前端 > HTML5

HTML5基础之表单（1-2）总结

2016-10-19 23:57 381 查看
HTML5基础之表单（1-2）总结



这里是截图笔记（代码的运行后的效果），代码在下面。













代码有些乱，毕竟用记事本敲得，大家谅解一下。

如果有错误或者好的建议希望大家指出，我一定会改正的。

<!doctype html><!--声明兼容所有浏览器的-->
<html>
<head>

<meta http-equiv="Content-Type" content="text/html;charset=GBK">
<title>HTML5基础-表单2</title>
<meta name="Keywords" content="关键词，关键词,关键词">
</head>

<body>
<h1>表单2</h1>
**这里我将表单和表格和在一起了
<form>
<table border="0">
<tr>
<td>用户名：</td>
<td><input type="text"></td>
</tr>

<tr>
<td>密码：</td>
<td><input type="password"></td>
</tr>

<tr>
<td>确认密码：</td>
<td><input type="password"></td>
</tr>

<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex">男 <input type="radio" name="sex">女
</td>
</tr>

<tr>
<td>我的爱好：</td>
<td>
<input type="checkbox" name="love">体育
<input type="checkbox" name="love">音乐
<input type="checkbox" name="love">艺术
</td>
</tr>

<tr>
<td colspan="2" align="center"><input type="submit" value="提交"></td>
</tr>

</table>
**感觉显得有些难看了哈哈。
</form>
<br /><br />
以上为复习内容！
<br />
<br />
<hr size="5" color="red"/>
<br />
<br />

**这里讲action和method<br />
  **action: 提交到地址，默认提交到当前的页面<br />
  **method: 表单提交方式。<br />
    ---常用的有两种 get 和 post</br>
    ------gat 请求存在安全性的问题密码会泄露（默认情况下是get请求）<br />
    ------post请求地址栏后面不会连信息，保密性较强。<br /><br /><br />
  面试题目get和post的区别：<br/>
    1、get请求地址会携带提交数据，post不会。<br/>
    2、get请求的安全级别较低，post较高。<br/>
    3、get请求数据大小有限制，post没有限制。<br/><br/>
  **enctype:一般请求下不需要这个属性，做文件属性上传时需要这个属性()。<br />
<br/>
<br/>
<h2 align="center">checked设置是这个表：</h2>
<br/>
<br/>
<form action="注册成功.html" method="post"><!--这里的method属性值大家可改一下-->
<h1>十秒加入**网，找到全部好友</h1>
姓名：<input type="text" name="Name"><br />
<br />
账号: <input type="text" name="user"><br />
</br>
密码：<input type="password" name="pwd"><br />
<br />
性别：
<input type="radio"name="sex">男 <input type="radio"name="sex" checked="checked">女<br/><br/>
生日：
<input> <br /><br/>

我的爱好：  <input type="checkbox" name="love">体育
<input type="checkbox" name="love" checked="checked">音乐
<input type="checkbox" name="love">美术
<br/><br/>
我现在：    <input type="radio" name="state">在工作
<input type="radio" name="state">在上学
<input type="radio" name="state">无工作
<br/><br/>

居住地所在省份：
<select name="address">
<option value="北京">北京市</option>
<option value="浙江省">浙江省</option>
<option value="天津市">天津市</option>
<option value="安徽省">安徽省</option>
<option value="上海市">上海市</option>
<option value="福建省">福建省</option>
<option value="重庆市">重庆市</option>
<option value="江西省">江西省</option>
<option value="山东省">山东省</option>
<option value="河南省">河南省</option>
<option value="湖北省">湖北省</option>
<option value="湖南省" selected="selected">湖南省</option>
<option value="广东省">广东省</option>
<option value="海南省">海南省</option>
<option value="山西省">山西省</option>
<option value="青海省">青海省</option>
<option value="江苏省">江苏省</option>
<option value="辽宁省">辽宁省</option>
<option value="吉林省">吉林省</option>
<option value="台湾省">台湾省</option>
<option value="河北省">河北省</option>
<option value="贵州省">贵州省</option>
<option value="四川省">四川省</option>
<option value="云南省">云南省</option>
<option value="陕西省">陕西省</option>
<option ="甘肃省">甘肃省</option>
<option valuvaluee="黑龙江省">黑龙江省</option>
<option value="香港特别行政区">香港特别行政区</option>
<option value="澳门特别行政区">澳门特别行政区</option>
<option value="广西壮族自治区">广西壮族自治区</option>
<option value="宁夏回族自治区">宁夏回族自治区</option>
<option value="新疆维吾尔自治区">新疆维吾尔自治区</option>
<option value="内蒙古自治区">内蒙古自治区</option>
<option value="西藏自治区">西藏自治区</option>
</select>
<br/>
<br/>

自我简介：
<textarea cols="10" rows="10"></textarea>
<br/><br/>

<input type="submit"  value="                          提  交                            " /><br /><br />
<input type="reset"  value="                          重 置                            " /><br /><br />
<input type="button" value="普通按钮" /><br/><br /><br />
<input type="file"/>这里就是文件输入项<br />
</form>
<br/>
<br/>
<hr size="5" color="red"/>
<br/>
<br/>
***使用图片提交表单的方式可以自己试一下:<br />
  :  <input type="image" src="图片的地址"/><br />
  : 这里的功能和<input type="submit"  value="提交">是一样的<br /><br /><br />

***实现默认选中的属性：<br />
  --checked="checked"<br />
  --比如在性别选项中，我设置默认选中"女"。<br />
  --在我的爱好中默认选择音乐，去看我代码的操作。<br />
  --下拉列表框：的默认选择为第一个。改变默认值的属性为：selected="selected"<br />
  比如我在居住地中默认选择"湖南省"为第一个。具体看代码操作，记住是第二个表单哦！如果不添加的话，它会默认为"北京市"。<br/><br /><br />
***重置按钮：<br />
  将表单信息重置(就是清空所有填写好了的信息，恢复成默认状态/初始状态)：   "<input type="reset">" <br/>
  我将他添加在了表单中（第二个表单）。<br /><br /><br />
***普通按钮(这里需要和js一起使用)：<br />
  语法： <input type="button" value="" /><br />
  具体操作看代码（第二张表）。<br />

***文本输入项：<br />
  语法： <input type="file" /><br />
  具体操作看代码（第二张表）。
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<font size="5" color="red" face="微软雅黑">***这里是表单的一些最基本的属性，一定都要记住，这是毫无条件的要学会。***</font>

<pre>
*

*
</pre>
</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  HTML5 表单 Web前端设计 网页设计 UI界面设计
相关文章推荐
新的分享
章节导航