HTML5基础—常用标签(七)表单

1.<form> 表单(双标记)

基本语法:

<form name="" method=="" action="">

...

表单元素(文本框、单选按钮、复选框、列表框等)

...

</form>

method取值为post和get,默认为get(注意二者之间区别)

2.<input>标记

<input name="" type="">

3.文本框和密码框

基本语法:

<input type="" name="" readonly="readonly" size="宽度" maxlength="可输入字符数" value="">

4.按钮:提交按钮、重置按钮、普通按钮、图片按钮

图片按钮:<input type="image" src="图片位置" width="" heigth="">

5.文件域

<input type="file" name="">

6.多行文本框<textarea>

基本语法:<textarea rows="行数" cols="列数">....</textarea>

7.列表<select>、<option>、<datalist>

<select>和<option>是配合使用的,一个<option>是下拉菜单中的一项

基本语法:

<select>

<option value="">..</option>

</select>
 

<datalist>必须和一个可输入文本框一起配合使用,基本语法:

<input type="text" list="要绑定的datalist的id" name="">

    <datalist id="">

        <option label="" value="" />

        ...

    </datalist>

必须设置value,label可以省略

8.<input>新增常用表单高级元素

9.url类型:<input type="url" name="" />,提交数据时,表单会对输入的路径自动验证,输入不合法,会有提示语句。

10.email类型:<input type="email" name="" />,提交数据时,表单会对输入的路径自动验证,输入不合法,会有提示语句。

11.日期和时间:<input type="时间日期的关键字" name="" />

12.数字类型:number和range,唯一区别在于页面的展现形式不同

number以文本框加一个类似具有上下调节按钮微调控件显示,range以滑动条的形式展现

13.color类型:<input type="color" name="" />

14.fieldset控件组:

<form>

    <fieldset>

        <legend>控件的标题</legend>

        ......

    </fieldset>

</form>

<legend>与<fleidset>搭配使用,<legend>标记可以为该控件组定义一个标题

15.search类型:<input type="search" name="" />

16.tel 类型:<input type="tel" name="" />

17.通用的表单属性

发布了32 篇原创文章 · 获赞 17 · 访问量 4903

猜你喜欢

转载自blog.csdn.net/mango_ZZY/article/details/100149243