HTML5~表单form总结

表单form总结

本篇大概内容（form表单，输入标签input，textarea多行文本标签，label标记标签，select 列表标签，域标签fieldset）

1、表单form最基本的模式

<form>内容
</form>

其中action指提交到某个页面（相当于URL，这里的#是指提交数据到本页面）
method是指提交方式：post和get两种
get方法比较不安全，传递的信息量不是很大（默认）
而post方法可以传递更大信息量的数据，更安全。
target是指在何处打开页面上的所有链接
（自己制作简单的页面的时候，也就使用 _blank或者直接使用默认）


_blank	在新窗口中打开链接。
_self	默认，在本窗口打开链接。
_parent	在父框架集中打开被链接文档。
_top	在整个窗口中打开被链接文档。
framename	在指定的框架中打开被链接文档。

<form action="#" method="post" target="_self">内容
</form>

2、输入标签input

<form><input type="输入类型"   name="自定义名称">
</form>

type可以选择单行文本框text，radio单选按钮，checkbox复选按钮，password密码 submit提交 reset重置 image图片提交按钮（了解） file文件上传域（了解）等
代码如下

<form><input type="text" name="name" value="111">   <br/> <input type="password" name="pwd">   <br/><input type="radio" name="gender" value="M"/>男  <br/><input type="radio" name="gender" value="F" checked/>女  <br/><input type="checkbox" name="one" value="1">朋友推荐   <br/>  <input type="checkbox" name="one" value="2" checked>搜索引擎   <br/><input type="checkbox" name="one" value="3" checked>媒体宣传   <br/><input type="checkbox" name="one" value="4">其他    <br/><input type="reset" value="重置"> <input type="submit" value="提交"> <br/><input type="image" src="logo.png" alt="无法显示时代替文本内容"><br /><input type="file" name="file01" /><br />
</form>

代码解释：

text对应的 value=“111” 代表初始化，text是单行文本框
第二行是password，再输入的时候就是看不到的
radio单选按钮和checkbox复选按钮，记得同一组name是一样的，其中checked代表默认
重置就是我输入输错了，我想重新输入，重置页面就是变成你刚进来的样子
image图片提交按钮，点击效果和submit一样，如果你要设置提交按钮的CSS，就用button

   <button>按钮</button>

截图如下

3、textarea多行文本标签，text是单行的

   <textarea>可编辑状态文本</textarea><textarea readonly>只读状态文本</textarea><textarea  disabled >禁用状态文本</textarea>

两种状态 readonly 只读（可以复制，不能编辑） disabled 禁用（动都不能动）
截图如下

4、label标记标签：为对应的表单控件生成焦点

原本代码<form method="post" action="#" method="post">用户名：<input type="text" name="name1"> <br />密　码：<input type="password" name="pwd1" ><br /><input type="submit" value="登录" /><br /></form>
带label标签的代码<form method="post" action="#" method="post">用户名：<label><input type="text" name="name1"></label> <br />密　码：<label><input type="password" name="pwd1" ></label><br /><input type="submit" value="登录" /><br /></form>

截图如下，其实是看不到什么区别的，但是用label标签会更好，特别是单选和多选的是时候，你会发现不带label标签的，我放在比如男这个位置是光标，但是带label标签是放在男这个位置也是箭头，我们点击同样可以选中，如果还是不明白可以试一下单选有没有label的情况。

5、select 列表标签 option选项标签 optgroup 选项组

selected是默认多选Ctrl+选择

<select><option value="apple">苹果</option><option value="cherry">樱桃</option><option value="grape" selected>葡萄</option>
</select><br/>

<select><optgroup label="水果类"><option value="apple">苹果</option><option value="cherry">樱桃</option><option value="grape">葡萄</option></optgroup><optgroup label="蔬菜类"><option value="potato">土豆</option><option value="tomato">番茄</option><option value="eggplant">茄子</option></optgroup></select>

<select multiple><option value="apple">苹果</option><option value="cherry">樱桃</option><option value="grape">葡萄</option>
</select><br/>

multiple 将列表变为列表框，就是直接可以看到所有内容

6、域标签fieldset 和域标签标题 legend

当一个表单form里面你想分为多个部分的时候就可以使用啦

<form method="post" action="#"><fieldset><legend>账号信息</legend><label>用户名：<input type="text" name="username" /></label><br/><label>密　码：<input type="text" name="pwd1" /></label><br/></fieldset><br/><fieldset><legend>个人信息</legend><label>姓　名：<input type="text" name="name" /></label><br/><label>单　位：<input type="text" name="title" /></label><br/>       </fieldset>
</form>

截图如下

晚一点会有两篇关于表单的实例练习，有兴趣的可以看一下，上面所有内容为个人总结，如有任何不对的地方，可以私聊我，我会马上进行修正，如果进行转载请告知，谢谢。

HTML5~表单form总结相关推荐

php form表单属性,HTML5 表单属性
HTML5 表单属性 HTML5 中新的表单属性 HTML5 的和标签添加了几个新属性,如下所示:新属性: autocomplete novalidate 新属性: autocomplete au ...
html5 设计 form,为HTML5表单设计表单模板
为HTML5表单设计表单模板 AEM中的HTML5表单组件提供了将XFA表单模板渲染为HTML5格式的功能. 表单设计人员可以使用Forms Designer设计表单模板,并使用HTML5呈现功能. ...
模拟QQ注册练习HTML5的表单form
考完研,成绩出来的那一刻万念俱灰,大半年的勤勤恳恳,从上学开始就再也没有这么认真过了,从八月份辞掉AS400开发的工作,毅然踏上了考研路,每天埋头在书堆中,前所未有的辛苦,前所未有的充实.期间也认识了 ...
html5表单验证没有效果,HTML5表单验证特性(知识点小结)
前台提交信息到后台一般两种常见提交方式: Form表单提交和 Ajax无刷新页面提交 placeholder 不是所有的input都支持,比如input date就不支持解决方案: 可以在date ...
实现跨浏览器html5表单验证
html5表单添加了很多类型的表单,而且还自带验证的功能.在移动端,手机等设备能够根据不同的input类型弹出不同的键盘,例如iphone弹的键盘 <input type="email ...
HTML5表单的创建及与PHP的交互
2019独角兽企业重金招聘Python工程师标准>>> Html5表单 <!DOCTYPE html> <html> <head lang=" ...
html5表单新增的输入类型,HTML5之表单新增类型介绍
1.html5的input标签的type类型新增介绍: 2.表单新增属性介绍: 3.代码示例: 1970 1980 1990 默认值: form="register" /> ...
html5表单实现简单计算器
html5表单实现简单计算器 <!DOCTYPE html><html><head> <title>this is a html page</ti ...
html5表单与PHP交互
1.示例代码前端: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

HTML5~表单form总结

表单form总结

HTML5~表单form总结相关推荐

最新文章

热门文章