七,表单标签

1,明文输入框

格式:账号:<input type="text" name="aa"></br>

2,暗文输入框

格式:<input type="password" name="bb"></br>

3,定义普通按钮

可以通过value属性来给按钮指定标题,它的作用是配合JS完成一些操作。

格式:input type="button" value="我是按钮"

4,图片按钮

用:配合JS完成一些操作

格式:<input type="image" src="images/register.jpg">

5,重置按钮

作用:用于清空表单中已经填写好的数据。

格式:<input type="reset" value=" ">

注意:如果想想改重置按钮默认的按钮标题可以通过value属性来修改

6,提交按钮

作用:将表单中已经填写好的数据,提交到远程服务器

格式:<form action="http://www.baidu.com">

注意:把表单中填写好的数据提交到远程服务器,必须具备两个条件:

1)需要给form表单添加一个action的属性,通过这个action属性指定需要提交到的服务器地址

2)需要给需要提交到服务器的表单元素添加一个name属性

7,隐藏域

作用 : 配合提交按钮将一些数据默默的悄悄(在用户不知道的情况下)的提交到服务器,一般是网站

用来进行某些用户调查的。

<input type="hidden" name="hx" value="wtf">

补充:1)fieldset标签:可以给表单添加一个边框 2)legend标签:可以给边框指定一个标题

          3)单选框和多选框的name都需要指定相同的name值

其中,textarea标签是用来在页面中输入文本的;cols是文本的宽度;rows是文本的高度

可以自动校验输入的内容是否符合邮箱的格式:邮箱:<input type="email">

可以自动校验输入的内容是否是URL地址:域名:<input type="url">;

输入框中只能输入数字:<input type="number">;

通过日历来选择时间:<input type="date">;

通过取色板来选择颜色:<input type="color">。

8,label标签

默认情况下文字和输入框是没有关联关系的,也就是说点击文字输入框不会聚焦,如果想点击文字时让

对应的输入框聚焦,那么就需要让文字和输入框进行绑定输入框和文字绑定在一起,那么我们可以使

用Label标签。

格式:1)将文字利用label标签包裹起来;2)给输入框添加一个id属性;3)在label标签中通过for

属性和输入框中的id进行绑定。

<label for="account">账号:</label><input type="text" id="account">

9,DATALIST标签

1)datalisst标签

它的作用是:给输入框绑定待选项。

2)格式

<datalist>

          <option>待选内容</option>

</datalist>

3)给一个输入框绑定待选列表

(1)编写一个输入框;

(2)编写一个datalist标签;

(3)给datalist设置一个ID;

(4)给输入框添加一个list属性,将datalist的id的值赋给list属性。

例如:

10,select标签跟textarea标签

1)select标签

作用:用来定义下拉列表

格式:

<select>

     <optgroup label="分组名称">

          <option>列表数据</option>

     </optgroup>

</select>

例如:

注意:

(1)下拉列表不能输入内容, 但是可以直接在列表中选择内容;

(2)可以通过给option标签添加一个selected属性来指定列表的默认值;

(3)可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类。

2)textarea标签

作用:定义一个多行输入框。

格式:<textarea>

           </textarea>

注意:

(1)默认情况下输入框可以无限换行;

(2)默认情况下输入框有自己的宽度和高度;

(3)可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无

限往下输入;

(4)默认情况下输入框是可以手动拉伸的。要想输入框固定,就要使用CSS:

<style type="text/css">

      textarea{

           resize:none;

      }

</style>

其中resize标签的调整大小的意思。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容