专注前端行业精选
当前位置:网站首页 > 最近更新 > 前端开发 > HTML > 正文

表单介绍 及表单常用语法详细介绍

作者:鹏仔先生日期:2020-06-02浏览:830分类:HTML

表单:

    作用:用来搜集用户信息

    语法:

<form method="get/post" action="服务器文件"></form>
<!-- (method 方式、方法) -->


1.文本框

    语法:

<input type="text" value="admin"/>

2.密码框

    语法:

<input type="password" placeholder="请输入密码"/>
<!-- 注:placeholder属性用来设置默认提示信息(低版本IE浏览器不支持) -->

3.提交按钮

    语法:

<input type="submit" value="立即提交"/>
<!-- 注:提交按钮上默认的文字内容是提交或提交查询,可通过设置value属性改变文字内容 -->

4.重置按钮

    语法:

<input type="reset"/>
<!-- 注:重置按钮只有放在form标签中才具备重置功能 -->

5.单选按钮

    语法:

<input type="radio" checked="checked" name="..."/>
<!-- 注: -->
	<!-- 给单选按钮添加相同的name属性才能达到多选一的效果; -->
	<!-- 给多选按钮添加默认选中状态,添加checked属性,由于checked属性和属性值相同,可以省略属性值; -->

6.复选按钮

    语法:

<input type="checkbox" checked/>
<input type="checkbox" disabled/>
<!-- 注:disabled用来设置input控件的禁用状态 -->

7.普通按钮

    语法:

<input type="button" value="我是按钮"/>
<!-- 注:普通按钮不具备提交功能,默认value值为空,必须根据需求设置相应的value值,通常结合js使用此按钮 -->

8.下拉列表

    语法:

<select>
	<option>...</option>
	<option selected>...</option>
</select>
<!-- 注:selected设置某一项为默认选中项 -->

9.文本域

    语法:

<textarea cols="行数" rows="字符宽度"></textarea>
/*扩展:取消手动拖动改变文本域大小如下样式*/
textarea{
	resize: none;
}


手机扫码访问

暂无评论,来添加一个吧。

取消回复欢迎 发表评论:

关灯

前端微信百人大群×