表单

l  用form元素表示表单

l  用action属性表示表单提交地址

l  用method属性表示表单的提交方式

注意:在制作静态页面时,可以不用书写上述的属性

 

对于静态页面开发者,表单只是一个普通的块盒,内部可以放置任何元素

 

通常情况下,表单中会放置一些可以与用户进行交互的元素:

l  文本框

l  按钮

l  单选框

l  多选框

l  下拉列表

这些我们常称之为表单元素

 

表单元素的两个重要属性:

name属性:表示发送到服务器的键名

value属性:表示发送到服务器的值

 

使用input元素表示一个文本框,input是一个空元素

可通过type属性设置文本框类型。

 

使用input中的type属性里的submit可以来表示按钮。

<input type=”submit” name=”” value=”提交”>

使用button元素来表示按钮

<button type=”reset”>重置按钮</button>

 

input与button的比较:

input是空元素,button是普通元素

input按钮中只能写文本,button的内容更加丰富。

input的兼容性更好。

 

使用select和option元素的组合表示下拉列表。

 

下来列表的类型:

普通的下拉列表

 

选项分组的下拉列表

 

使用datalist元素表达数据列表:

 

使用textarea元素表达多行文本框:

<textarea cols=”15″ rows=”3″ style=”width:300px;height:50px”>这里内容会在页面显示,包括空格</textarea>

 

使用fiedset和legend元素,对表单内容进行分组

使用disabled属性和readonly属性,设置表单元素的可用状态。

<fieldset>

             <legend>账号信息1233</legend>

             <div>

                 账号:<input type=”text” disabled name=”” value=”kkkk”>

             </div>

             <div>

                昵称:<input type=”text” readonly name=”” id=”” value=”棒棒鸡”>

             </div>

         </fieldset>

 

伪类focus:表示聚焦时候的样式。

 

表单元素的默认样式:

表单元素均默认为行盒,水平排列

表单元素均为可替换元素,可设置盒模型中的各个部分的尺寸

原文链接:https://www.cnblogs.com/boring333/p/11069924.html

原创文章,作者:优速盾-小U,如若转载,请注明出处:https://www.cdnb.net/bbs/archives/33358

(0)
优速盾-小U的头像优速盾-小U
上一篇 2025年5月28日 01:01
下一篇 2025年5月28日 09:10

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

优速盾注册领取大礼包www.cdnb.net
/sitemap.xml