本文目录
- 几个流程html表单样例
- HTML中的表单问题
- html中点击按钮打开一个表单，填写完表单数据后点击按钮怎么关闭它
- 这种表单CSS html都是怎么写具体些，最好有示例
- html 表单隐藏的作用
- HTML5 新增加了哪些表单元素
- 求一个HTML5 表单的写法例子
几个流程html表单样例
HTML 表单用于搜集不同类型的用户输入。
实例
文本域 (Text field)
本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。
密码域
本例演示如何创建 HTML 的密码域。
（可以在本页底端找到更多实例。）
表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
表单使用表单标签（《form》）定义。
HTML中的表单问题
select就是html页面上的一个控件，说白了就是一个下拉列表框，可以选择值的那种。
这里的《select name=“cars“》《/select》是定义一个名字为“cars”的下拉列表框，这中间的《option value=“audi“》Audi《/option》，这个是下拉列表框中的值，你写几个option，就有几个值，中间的value=“audi“,这个是如果选中这个值的话，传到后台的值就是audi，option中间的Audi是页面上显示的名字，value中的“audi”值用户是看不到的，Audi用户才能看到，这几个值是有区别的，这几个每一个都代表一个值，上面写的四个，其实页面上就会出现四个可选项，希望对你有帮助
html中点击按钮打开一个表单，填写完表单数据后点击按钮怎么关闭它
下面是个简单例子：
《div style=“width:360px; background-color:#fa0; padding:30px“》
《form》
成绩：《input name=“chenji“ type=“text“ value=““/》分 《input type=“button“ value=“设置“ onclick=“win.style.display=’block’;“/》《br /》《br /》
《input type=“submit“ value=“确定“/》
《/form》
《/div》
《div id=“win“ style=“display:none; position:absolute; left:120px; top:80px; border:1px solid #888; background-color:#fff; padding:20px“》
信息《br /》
姓名：《input type=“text“ value=““/》《br /》
年龄：《input type=“text“ value=““/》《br /》《br /》
《input type=“button“ value=“确定“ onclick=“alert(’代码你自己搞定’);“/》
《input type=“button“ value=“关闭“ onclick=“win.style.display=’none’;“/》
《/div》
-html表单
这种表单CSS html都是怎么写具体些，最好有示例
自学自强，不懂就问，但不能太依赖对方哦，有时自己解决问题才是真正学到东西的，^.^
不废话，css代码：
《style》
.Gavin_Design ,.gd div{margin:0 auto; overflow:hidden; height:auto; background-color:transparent; color:#333;}
.gd{width:1000px;}
.gd input ,.gd textarea{margin:0; padding:0; background:none; border:none; font-size:14px; resize:none; outline:0;}
.gd .part{padding:15px 0;}
.gd .textarea{height:90px; border:1px solid #ddd; -webkit-box-shadow:inset 0 3px 2px rgba(0,0,0,.05); -moz-box-shadow:inset 0 3px 2px rgba(0,0,0,.05); box-shadow:inset 0 3px 2px rgba(0,0,0,.05); background:#fff; padding:10px;}
.gd .textarea textarea{width:100%; height:90px; overflow:hidden; overflow-y:auto;}
.gd .bottom_contorl{margin-top:15px;}
.gd .bottom_contorl .express{float:left; height:32px; line-height:32px; padding-left:10px;}
.gd .bottom_contorl .button{float:right; width:320px; height:32px; text-align:center; font-size:0;}
.bottom_contorl .button input{height:32px; width:150px; margin-left:10px; color:#fff; cursor:pointer;}
.bottom_contorl .button input.submit{background:#4779be;}
.bottom_contorl .button input.submit:active{background:#3c6eb4;}
.bottom_contorl .button input.cancel{background:#b5b5b5;}
.bottom_contorl .button input.cancel:active{background:#a9a9a9;}
.gd .part .init{width:100%; border-collapse:collapse; color:#333;}
.gd .part td{border-bottom:1px solid #e5e5e5; height:60px; padding:2%; vertical-align:middle;}
.gd .part .user{overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px; width:60px;}
.gd .part .me{color:#666;}
.gd .part .reply{color:#22627d;}
.gd .part .comments{font-size:14px;}
《/style》
html结构代码（div+css）：-表单
《div class=“Gavin_Design gd“》
《div class=“part“》
《div class=“textarea“》
《textarea placeholder=“你有什么好的建议请留言“》《/textarea》
《/div》
《div class=“bottom_contorl“》
《div class=“express“》表情《/div》
《div class=“button“》
《input type=“button“ class=“submit“ value=“提交“》
《input type=“button“ class=“cancel“ value=“取消“》
《/div》
《/div》
《/div》
《div class=“part“》
《table cellpadding=“0“ cellspacing=“0“ class=“init“》
《tr》
《td width=“10%“》《div class=“user me“》我《/div》《/td》
《td width=“90%“ class=“comments“》老师你好，周末快乐！《/td》
《/tr》
《tr》
《td》《div class=“user reply“》秋叶，很长的名字《/div》《/td》
《td class=“comments“》下午好，秋荷！《/td》
《/tr》
《tr》
《td width=“10%“》《div class=“user me“》我《/div》《/td》
《td width=“90%“ class=“comments“》好长不想打字，好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字。《/td》
《/tr》
《tr》
《td》《div class=“user reply“》秋叶，很长的名字《/div》《/td》
《td class=“comments“》《b》亲爱的。。。好长不想打字，好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字《/b》《/td》
《/tr》
《/table》
《/div》
《/div》
希望能帮助到你^.^-html表单
html 表单隐藏的作用
希望可以帮助你
隐藏表单主要可用于唯一标识传值，但你即不想用GET方法传，也不想显示这个唯一标识的时候适用。
作用比喻：你的表单内是用户资料，你需要对用户资料的修改，但又不想显示用户的登录ID，或登录ID已经在上一个页面显示过，这个页面只是上一个页面的下一页，你就可以把值放到隐藏表单里再传到另一个页。这样你就可以在任何一个页面都能标识正在编辑的这个用户资料是谁的（哪个ID）
用法说明：其实他和其它表单类型是一样的，同样有value这个属性，唯一的区别是在于，隐藏表单不会把这个无素显示出来，但在提交过程中仍然有效。
例：《input type=“hidden“ id=“hid“ value=“用户ID“》
放到《form》《/form》中进行提交后，可到接收处理页面中进行request，获取该元素的值。
-表单
HTML5 新增加了哪些表单元素
首先先说一个html5中表单新增的一个功能，在我们之前的html中，表单元素必须放在form元素所包含的里面，在html5中，可以把他们写在页面上的任何一个地方，然后给该元素增加一个form属性，form属性的值为form表单的id，如下：-html表单
[html] view plain copy
《form method=“get“ id=“test“》
《input type=“text“ name=“name“/》
《input type=“password“ name=“password“/》
《input type=“submit“ value=“提交“》
《/form》
《input type=“text“ name=“confirm“ form=“test“》
在form元素里面的表单元素可以不用添加form属性，如果你想利用form获取所有表单元素的值，那么在form元素外面的表单元素就必须添加form属性，input、select、textarea等元素都满足该功能。-表单
接下来开始介绍html5新增的表单元素，所有例子均用谷歌浏览器展示。
新增表单元素
email：提交表单的时候验证输入值是否满足email的格式
《input type=“email“ name=“email“/》
url：提交表单的时候验证输入值是否满足url的格式
《input type=“url“ name=“url“/》
number：根据你的设置提供选择数字的功能，其中min为最小值，max为最大值，value为默认值，step为点击箭头时数字的变化量，max、min、step、value均可不写，目前某些浏览器还不支持。-html表单
《input type=“number“ name=“number“ min=2 max=100 step=5 value=“15“/》
range：会以一个滑块的形式表现包含一定范围内数字值的输入域，max为最大值，min为最小值，value为默认值，如果没有设置max和min，默认值是1-100
《input type=“range“ name=“range“ min=20 max=200 value=“60“/》
日期和时间类型：
date：选取日、月、年
《input type=“date“ name=“date“/》
month：选取月、年
《input type=“month“ name=“month“/》
week：选取周、年
《input type=“week“ name=“week“/》
time：选取小时、分钟
《input type=“time“ name=“time“/》
datetime：选取时间、日、月、年(UTC时间)（我这里浏览器显示不出效果）
《input type=“datetime“ name=“datetime“/》
datetime-local：选取时间、日、月、年(本地时间)
《input type=“datetime-local“ name=“datetime-local“/》
search：用于搜索域，若加上result=“s“属性，则会在搜索框前面加一个搜索图标（我这里浏览器显示不出效果）
《input type=“search“ name=“search“ result=“s“/》
tel：验证输入的是否是电话号码的格式（我这里浏览器显示不出效果）
《input type=“tel“ name=“tel“ /》
color：color类型会提供颜色拾取器，供用户选择颜色，并将用户选择的颜色填充到此元素中
《input type=“color“ name=“color“/》
新增input属性(部分容易理解的就不进行代码演示了)，后面为支持该属性的元素
autofocus：在打开页面时使元素自动获取焦点 //input,button,select,textarea-表单
placeholder: 在用户输入时进行提示 // input,textarea-html表单
form：这篇文章的开头就有这个属性，它用于表明元素属于哪个表单，无论元素的位置在哪里，所属表单都能获取该元素的值 //input,output,button,select,textarea,fieldset -表单
required：表明该元素是必填项，当提交表单的时候会自动验证该元素的内容是否不为空 //input,textarea
max/min/step：限制值的输入范围，以及值的变化程度。上面的新增number元素有介绍。 //input
autocomplete：使form元素或者input元素拥有自动完成功能，既记录用户之前输入的值，关闭为off，默认为on。 //form,input-html表单
表单重写属性： //input
formaction:重写表单的action属性
formenctype:重写表单的enctype属性。
enctype属性管理的是表单的MIME编码，MIME就是一种电子邮件传输的互联网标准，表明传递的信息类型和编码，共有三个值可选：
1，application/x-www-form-urlencoded（默认），设置表单传输的编码。
2，multipart/form-data，指定传输数据的特殊类型，主要就是上传的非文本内容，比如文件、图片。
3，text/plain，纯文本传输。
formmethod: 重写表单的method属性
formnovalidate:重写表单的novalidate属性
formtarget：重写表单的target属性。
比如:
[html] view plain copy
《form action=“test.html“ method=“get“ autocomplete=“on“》
姓名: 《input type=“text“ name=“name“ /》《br /》
密码: 《input type=“password“ name=“pwd“ /》《br /》
《input type=“submit“ formnovalidate=“true“ value=“提交未经验证“/》
《/form》
multiple:规定输入字段可选择多个值 //input,select
list：list属性的值为datalist元素的id，datalist元素类似于选择框，在文本框获得焦点的时候以提示输入的方式显示。如下：
[html] view plain copy
姓名：《input type=“text“ name=“name“ list=“name“/》
《datalist id=“name“ 》
《option value=“zhangsan“》张三《/option》
《option value=“lisi“》李四《/option》
《option value-“wanger“》王二《/option》
《/datalist》
pattern:验证input输入域的格式，即正则表达式。
《input type=“text“ name=“name“ pattern=“[A-z0-9]{8}“/》
求一个HTML5 表单的写法例子
表单是用来获取用户输入的一些数据，最常见的就是注册，登录之类的；
首先，打开IDEA软件，并新建一个工程，建好后，右键创建一个html5文件，完成后便完成了最开始的工作；
接着我们先熟悉一些较常用的表单标签：表单《form》， 输入域《input》，文本域《textarea》，按钮《button》，域的标题《legend》，控制标签《label》等。我们创建一个form,如图，输入一些你想要创建的东西（我演示的仅为用户密码）；-表单
打开网页看效果图，便是这样的效果了，拥有了最简单的帐号密码；
同时，我们还可以添加一些选择的元素，如你喜欢什么游戏；
