html中表单标签的type属性的应用实例

2020-07-19 00:39:44
本篇文章给大家带来的内容是关于html中表单标签的type属性的应用实例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

<input/>单标签<input type="text(文本)"/>

type属性:

text (单行文本输入框)

password(密码输入框)

radio(单选按钮)

checkbox(复选框)

button (普通按钮)

submit(提交按钮)

reset(重置按钮)

image(图像形式的提交按钮)

file(文件域)
name 自定义 控件名称
value 自定义 input控件中的默认文本值
size 正整数 input 控件在页面中的显示宽度
checked checked 定义选择控件默认被选中的项
maxlength 正整数 控件允许输入的最多字符数

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>表单设置</title></head><body>    <table width="500" border="0" cellpadding="0" cellspacing="0" align="center">        <caption><h3 style="color: pink;">青春不常在,抓紧谈恋爱</h3></caption>        <tr height="60">            <td>性别</td>            <td style="color: blue;">                <img src="boy.jpg" />男<input type="radio"  name="sex" />                <img src="girl.jpg" />女<input type="radio" name="sex" />            </td>        </tr>        <tr height="60">            <td>生日</td>            <td>                <select name="" id="">                    <option value="">选择年份</option>                    <option value="">142</option>                    <option value="">2234</option>                    <option value="">3342</option>                    <option value="">2124</option>                </select>                <select name="" id="">                    <option value="">选择月份</option>                    <option value="">1月份</option>                    <option value="">2月份</option>                    <option value="">3月份</option>                    <option value="">2月份</option>                </select>                <select name="" id="">                    <option value="">选择日</option>                    <option value="">1号</option>                    <option value="">2号2</option>                    <option value="">3号</option>                    <option value="">2号1</option>                </select>            </td>        </tr>        <tr height="60">            <td>所在地区</td>            <td >                <input type="text" value="北疆" style="color:gray;" />            </td>        </tr>        <tr height="60">            <td>所在地区编码</td>            <td >                23 <input type="checkbox" />                34 <input type="checkbox" />                56 <input type="checkbox" />                67 <input type="checkbox" />            </td>        </tr>        <tr height="60">            <td>用户名</td>            <td >                <input type="text" />            </td>        </tr>        <tr height="60">            <td>密码</td>            <td >                <input type="password" maxlength="6" />//控制最多输入6个字            </td>        </tr>        <tr height="60">            <td>注册</td>            <td >                <input type="button" value="注册" />                <input type="button" value="提交"  />                <input type="button" value="失败" />                <input type="image" src="zhuce.jpg" />            </td>        </tr>        <tr height="60">            <td>上传头像</td>            <td >                <input type="flie" >            </td>        </tr>        <tr height="60">            <td>自我介绍</td>            <td >                <textarea width= "500"></textarea><!--多行文本框-->            </td>        </tr>        <tr height="60">            <td></td>            <td ><!--图像按钮-->                <input type="image" src="zhuce.jpg" >            </td>        </tr>        <tr height="60">            <td></td>            <td > <!--选择-->                我同意 <input type="checkbox" />            </td>        </tr>        <tr height="60">            <td></td>            <td >                <ins>我是会员立即注册</ins>            </td>        </tr>        <tr height="60">            <td></td>            <td >                <h3>我承诺</h3>                 <ul>                    <li>辅导班v</li>                    <li>发给你发</li>                    <li>vfbf</li>                    <li>房间打开</li>                </ul>            </td>        </tr>    </table></body></html>

相关推荐:

html strong标签是什么意思?html中strong标签的具体用法介绍

html link标签有什么作用?html link标签的定义及属性介绍