表单基础4

最新推荐文章于 2022-10-28 09:46:58 发布

三爷麋了鹿

最新推荐文章于 2022-10-28 09:46:58 发布

阅读量312

点赞数

分类专栏： html5学习

本文链接：https://blog.csdn.net/u800820/article/details/41866075

版权

html5学习专栏收录该内容

37 篇文章 0 订阅

订阅专栏

用CSS配置表单样式

1.用CSS框模型创建一系列框。示例：CSS代码如下：

#myform{
   background-color:#eaeaea;
   width:400;}
label{
   float:left;
   width:120px;
   clear:left;
   text-align:right;
   padding-right:10px;
   margin-top:10px;}
input,textarea{
   margin-top:10px;}
#mysubmit{
   margin-left:130px;
   padding-bottom:10px;}

HTML代码如下，使用div组织表单控件：

<form id="myform" method="post">
   <div>
      <lable for="myname">Name:</lable>
      <input type="text" name="myname" id="myname">
   </div>
   <div>
   <lable for="myemail">Email:</lable>
      <input type="text" name="myemail" id="myemail">
   </div>
   <div>
   <lable for="mycomments">Comments:</lable>
      <input type="text" name="mycomments" id="mycomments">
   </div>
   <div id="mysubmit">
      <input type="submit" value="Submit">
   </div>
</form>

HTML5文本框表单控件

1.E-mail表单控件接收电邮地址，为<input>设置type="email"即可配置E-mail地址表单。比如"Drcom@gmail.com"，只有支持HTML5的浏览器才能验证用户输入的是不是电邮地址。示例：

<lable for="email">E-mail:</lable>
<input type="email" name="email" id="myEmail">

2.URL表单控件作用是接收URL或URI，为<input>设置type="url"即可配置URL表单。

3.搜索词输入表单控件作用是接收搜索词，有利于搜索引擎搜索。为<input>设置type="search"即可。

HTML5的datalist元素

1.datalist元素使得文本框的值不仅可以输入，还可以从列表中选择。

2.datalist用3个元素配置：一个input元素，一个datalist元素以及一个或多个option元素。代码示例：

<lable for="color">Select color：</lable>
<input type="text" name="color" id="color" list="colors">
<datalist id="colors">
   <option value="red">
   <option value="green">
   <option value="blue">
   <option value="black">
   <option value="white">
</datalist>

注意：input元素的list属性值和datalist的id属性值相同，这将文本框和datalist控件关联。

HTML5的slider控件和spinner控件

1.slider控件提供直观的交互式界面来接收数值信息，显示滑块，不支持的浏览器将显示成文本框。缺点是不直接向用户显示值。为<input>指定type="range"即可配置slider控件。

2.spinner控件提供直观的交互式界面接收数值信息，并向用户提供反馈。为<input>指定type="number"即可配置一个spinner控件。

slider,spinner和date/time表单控件附加属性

属性名称	属性值	用法
max	最大值	HTML5属性，指定最大值
min	最小值	HTML5属性，指定最小值
step	最小调整单位	HTML5属性，指定每次调整的最小间隔

HTML5日期和时间控件

1.HTML5提供多种日期和时间表单控件来接收日期和时间信息。为<input>的type属性指定不同的值，即可配置一个日期或时间控件。这些属性值如下：

type属性值	用途	格式
date	日期	YYYY-MM-DD
datetime	日期和时间，加上时区信息	YYYY-MM-DDTHH:MM:SS-##:##Z
datetime-local	日期和时间，无时区信息	YYYY-MM-DDTHH:MM:SS
time	时间，无时区信息	HH:MM:SS
month	年月	YYYY-MM
week	年周	YYYY-W##，其中##代表一年中的第多少周