2018-06-05表单结构

表单元素:

也是一个组合标签,只不过要求要松一点!

①    需要跟用户交互!

②    需要跟后台数据比对!

表单:<form action="提交地址" method="提交方式(一般为post)"></form>

表单里面包含的就是表单元素,作用就是把表单元素的值提交到后台服务器!

表单元素:

①    文本框

②    下拉框

③    选择

④    按钮

1;文本类型

2;选择类型

3;按钮类型

4;文件类型

5;图片按钮  --具体是这个!

Ps:表单元素可以不放在form里,但是清空/提交会受影响(提交/重置按钮的作用域是form里面的内容)!

目前学到几个表示路径的属性:

①    Href

②    Src

③    Action

属性名和属性值一样的可以省略写一个(如:disabled,readonly,checked)!

Name和Value可以是所有表单元素的值,非常重要(这是个键值对,用来向后台插入数据,Name是键,Value是值)!

文本类型:

①    文本框Text:Name,Value,disabled(不可操作),readonly(只读),placeholder(默认提示文字,加入Value有值,则不显示)

②    密码框Password

③    隐藏域hidden

④    多行文本Textarea

选择类型:

①    单选radio:disabled(不可操作),checked(默认选中)Ps:如果不设置Name是可以多选,设置Name为同一个值,就只能选中一个!

②    多选checkbox:disabled(不可操作),checked(默认选中)

Important:

单纯设置radio或者checkbox的话,默认点击小圆点才可以选中该选项,通过lebel标签可以将radio或者checkbox设置成点击文字也可以选中,以下具体两种方法:

First method!

Second method!

下拉表单元素:

Select option:

①    默认选中:option标签加入select属性!

②    全部显示:multiple(select属性)

③    显示多少内容:size(select属性)

Ps:下拉框的值就是option标签的value的值,如果option的value不写,取的值就是option的内容(value=""此时value的值是空)!

按钮表单元素:

①    普通按钮:button

②    提交按钮:submit(<button></button>和<input type="submit">都是提交按钮,但是<input type="button">是普通按钮)

③    复位/重置:reset (作用域为form内)

<pre></pre>格式化标签:将写代码时所用的格式显示到浏览器中!

通用格式:

<input type="类型" name="类似于ID" value="值">

特殊格式:

①    Textarea:<textarea name="" id="" cols="30" rows="10"></textarea>

②    Select option:<select name="" id="">

         <option value=""></option>

         <option value=""></option>

         <option value=""></option>

</select>

禁止用户自由拖动Textarea边框的方法:

Get传值与Post传值:

①    Get传值:file:///F:/StudyH5/2018-06-05/Code/CeShi.html?wayne=bruce&age=18#

直接显示在地址栏,方式是:?键值对&键值对&键值对!

②    Post传值:主要用来传输重要的东西(查看元素à网络àXHRàmethodàpost传值)!

File文件上传:

一定要有:enctype="multipart/form-data"这个属性设置!!!

图片提交按钮:<button><img src="" alt=""></button>  --Button按钮里面加入img!

给表单设置一个边框:

Fieldset的大小由CSS来控制!

通过Text框实现下拉选择:

原文地址:https://www.cnblogs.com/postgredingdangniu/p/9140602.html