表单标签在网站中主要负责的是进行与用户间的交互, 如果没有了交互, 那么网站就只是一个展示, 会死气沉沉的. 表单标签 表单标签可以把浏览者(也就是我们用户自己)输入的数据传送到服务器端, 这样服务器程序就可以处理表单传过来的数据, 完成与用户的交互, 在任何的开发中, 交互永远都是灵魂, HTML的交互和其他开发的交互一样, 一般使用get或者post方式(get请求是直接使用完整的字符串网址进行数据的请求和上传, 优点是方便快捷, post请求分为连接头和请求参数(bodyString), 所以需要进行拼接, 具体详细的属于后端开发者需要考虑的问题, 感兴趣的同学可以单独的进行学习). 标签的语法 直接使用一段代码为大家解释一下 1 2 3 4 5 表单标签 6 7 8 9 用户名:10 11 密码:12 13 14 15 16 17 登入後複製 method属性是指和后台交互的具体方式(get, post), 前面已经有较为详细的介绍了. action属性是指表单提交的地址, 一般是.php为后缀的文件, 这样方便和后台的交互. 上文中涉及了一些之外的, 但是包含在表单标签之中的, 单独拿出来写. 输入标签 输入标签是在我个人理解属于一种声明, 意思就是下面将会开始人机交互了, 它具有几个参数, 最重要的参数type决定了input显示给用户的输入类型, 比如"text"意思就是文本输入, "button"就是按钮操作, "password"就是密码输入框, 如果有一定的英文基础会很舒服, 不过写过两三次就好理解啦, 大家多写多记忆就好了, name是指为文本框命名, 这样方便后台程序ASP, PHP的使用. value是为文本输入框设置默认值, 一般作为提示等作用(前提是文本输入框, 在不同的type类型中, value充当着不同的角色). 标签type属性的几种类型 text, password上面已经说过了, 下面讲一些其他的 submit, 提交数据按钮, 当用户需要提交表单信息到服务器时, 需要用到提交按钮, 这个时候value属性会是提交按钮上面显示的文字. reset, 重置按钮, 这个的value属性和上面一样的, 只是功能是将表单信息重置到初始时的状态, radio, 单选框, 也就是我们平常点击的小圆点, 点击后为选定状态, 再点击就没有效果了那种, checkbox, 复选框, 这个是我们平常用的那种小方块, 点击后里面会是一个小对号的那种. 不过如果参数为radio/checkbox后, value属性是指提交到服务器的具体的值, 比如0和1, 代表假和真. name还是命名, checked是指该项的选中状态, 如果属性值为"checked"是指默认即被选中. 下拉列表选择标签 标签类似于标签, 它声明了一种状态, 在这个标签内部的标签, 就类似于标签内部的标签一样, 和标签共同组合成了一个下拉的列表标签, 不同的标签对应着不同的选择情况. 标签内部有一个属性mutiple, 当设置为"multiple"时, 那么下拉列表将支持多选(Windows下Ctrl + 单击, Mac下Command + 单击). 1 2 3 4 5 下拉列表框 6 7 8 9 开发语言:10 11 Objective-C12 Swift13 Java14 C++15 16 17 18 登入後複製 代码效果 这个时候在标签中设置selected属性, 值为"selected"那么那个选项就会被默认选中. 文本域标签</h2> <p> <textarea>标签大家通过英语就能看出来大致的意思了, 也就是在一个区域中都可以使用文本输入框的一切特性, 对应的它有两个参数, rows(行数), cols(列数), 设置之后将直接影响文本区域的尺寸, 如果学习过css之后, 可以通过width和height两个属性来修改, 效果也是一样的.</p> <h2> <label>文本标签</h2> <p> <label>标签我比较习惯称之为文本类的标签, 它并不会向用户呈现什么效果, 主要的用途是方便了鼠标用户点击范围的可选性, 也就是加入label后面有个单选框或者复选框, 当你点击与之相关联的label标签时, 也可以实现点击对应框的效果, 不过需要设置label的for属性, 要求要与对应的输入框id相同.</p> <p> </p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="precsshui"><!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>form中的lable标签</title></head><body>你对什么语言感兴趣:<form> <label for="Objective-C">Objective-C</label> <input type="checkbox" name="OC" id="Objective-C"/> <br /> <label for="Swift">Swift</label> <input type="checkbox" name="SW" id="Swift" /> <br /> <label for="Java">Java</label> <input type="checkbox" name="JV" id="Java"></form></body></html></pre><div class="contentsignin">登入後複製</div></div> </p> <p> 这个代码实现的功能即是点击文字, 复选框即关联点击效果.</p> <p> </p> <p> </p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p> </form>
