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

表单：

    作用：用来搜集用户信息

    语法:

<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;
}

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓