您的位置：首页 > Web前端 > HTML

HTML-form表单自学笔记Ⅴ

2020-07-18 04:44 567 查看 
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<table align="center">
<thead>
<tr>
<th colspan="2">注册信息</th>
</tr>
</thead>
<tr>
<td align="right" width="100">账号：</td>
<!--文本框
name    表示表单元素名称，以后想携带数据到后台，必须设置name
value   是初始值
checked 表示是否选中
checked="checked"   此时可以省略值 checked
checked="true"      默认选择
checked="false"     默认不选择
selected    下拉列表选项是否选中
readonly    只读
disabled    不能被操作，而且不能被提交
maxlength   输入最大长度
-->
<td><input type="text" name="UserName" value="请输入账号" maxlength="11" readonly></td>
</tr>
<tr>
<td align="right" width="100">密码：</td>
<!--密码框-->
<td><input type="password" name="pwd" id="" value="请输入密码" disabled></td>
</tr>
<tr>
<td align="right" width="100">性别：</td>
<td>
<!--单选框    name一定要写而且相同才能达到互相排斥，只能选择一个

-->
<input type="radio" checked value="male" name="sex" id="">男
<input type="radio" value="female" name="sex" id="">女
</td>
</tr>
<tr>
<td align="right" width="100">所在城市：</td>
<td>
<!--下拉列表-->
<select name="city" id="">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
</select>
</td>
</tr>
<tr>
<td align="right" width="100">擅长：</td>
<td>
<!--复选框-->
<input type="checkbox" checked name="zhiye" id="">前端
<input type="checkbox" name="zhiye" id="">后端
<input type="checkbox" name="zhiye" id="">测试
<input type="checkbox" name="zhiye" id="">运维
</td>
</tr>
<tr>
<td></td>
<!--上传文件-->
<td><input type="file" name="resume" id=""></td>
</tr>
<tr>
<!--文本域  textarea    cols：列    rows ：行-->
<td align="right" valign="top">选择理由：</td>
<td><textarea name="" id="" cols="30" rows="10"></textarea></td>
</tr>
<tr>
<!--隐藏域    希望前端带数据到后台，不展示在页面当中-->
<td><input type="hidden" name=""></td>
</tr>
<tr>
<!--普通按钮 -->
<td align="center"><input type="button" value="普通按钮"></td>
<!--submit按钮具有提交的作用，他会把表单的数据通过 name携带到一个地址里面去-->
<td><input type="submit" value="确定"></td>
<!--reset重置-->
<td><input type="reset" value="重置"></td>
<tr>
<td align="center"  colspan="2">
<!--图片提交按钮-->
<input type="image" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
</td>
</tr>
</table>
</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航