1.搭建表单页面的结构
<!DOCTYPE HTML>
<html>
<head>
<title>表单input</title>
<meta http-equiv="Content-Type" content="text/html";charset=utf-8" />
</head>
<body>
<h1 align="center">注册信息</h1>
<hr color="#336699"/><!--横线就是hr/ 建表单的实质就是建表 但是在目前为止我只是建了一个表单而并未对表单里的内容进行添加所以表单并不现实内容-->
<form>
<table align="center" width="600px" bgcolor="#f2f2f2">
<!--text是文本域 password是密码显示的是小黑点 submit是提交按钮 file是文件域-->
<tr>
<td align="right">姓名：</td>
<!--标签 属性是文本 姓名是用户名 文本框的尺寸是25 文本框可以输入的最大长度是6-->
<td><input align="left" type="text" name="username" size="25" manlength="6" placeholder="请输入姓名"></td>
<!--此行写的就是文本框的样式与内容-->
</tr>
<tr>
<td align="right">邮箱：</td>
<td><input align="left" type="text" name="email" value="@163.com"size="25" maxlength="6"/></td><!--value就是设置每次打开文本框的默认值-->
</tr>
<tr>
<td align="right">密码：</td>
<td><input align="left" type="password" name="paws" size="25" maxlength="6" placeholder="请输入密码"/></td>
</tr>
<tr>
<td align="right">确认密码：</td>
<td><input align="left" type="password" name="密码" size="25" maxlength="6" placeholder="请输入密码" /></td>
</tr>
<tr>
<td align="right">上传照片:</td><!--上传照片需要从本机电脑获得路径因此需要添加文件域-->
<td><input align="left" type="file" name="上传照片" size="25" maclength="6" /></td><!--使用不同的浏览器上传照片的效果是不一样的-->
</tr>
<tr>
<td align="right">性别：</td><!--性别要么是男要么是女所以只能使用单选框 radio的意思就是单选-->
<td>男<input align="left" type="radio" name="性别"/>
<!--为什么两行代码要写在一个td里面因为一行两列就是这么简单-->
女<input align="left" type="radio" name="性别"/>
<!--名字必须是一样的如果不一样就没有办法去实现单选-->
保密<input type="radio" name="性别" value="保密" checked/><!--默认值是保密的一个状态 虽然是单项选择但是默认的值不能是一样的-->
</td>
</tr>
<tr>
<td align="right">爱好：</td>
<td>跳舞<input align="left" type="checkbox" name="爱好" />
唱歌<input align="left" type="checkbox" name="爱好"/>
书法<input align="left" type="checkbox" name="爱好" value="书法" checked/></td><!--value就是默认值的意思只需要在最后一个表格里添加就可以了-->
</tr>
<tr>
<td align="right">城市：</td>
<td>
<select name="city" size="6" multiple>
<!--value值的作用就是将城市名传递给服务器 size就是将所有的选择都显示出来-->
<option value="北京">--请选择--</option>
<option value="北京" selected>北京</option><!--select是一个默认的值默认的值就是北京-->
<!--对下拉菜单进行分类-->
<option value="天津">天津</option>
<option value="上海">上海</option>
<option value="西安">西安</option>
<option value="福建">福建</option>
<opyion value="东北">东北</option>
</select>
<select name="城市">
<option>---请选择---</option>
<optgroup label="华北">
<option value="北京"></option>
<option value="上海"></option>
<option value="西安"></option>
</optgroup>
<outgroup label="华东">
<option value="西藏">西藏</option>
<option value="内蒙古">内蒙古</option>
<option value="新疆">新疆</option>
</opgroup>
</select>
</td>
</tr>
<tr>
<td align="right">爱好的运动：</td>value
<td>跑步<input type="checkbox" name="爱好的运动" />
篮球<input type="checkbox" name="爱好的运动" />
羽毛球<input type="checkbox" name="爱好的运动" value="羽毛球" checked/></td>
</tr><!--按钮的作用就是在实用的过程中可以帮助恢复初始的功能发挥重要的作用 button是普通的按钮 submit就是提交按钮 reset是恢复重置按钮-->
<tr>
<!--多行文本域用textarea-->
<td align="right">简介</td>
<td><textarea name="简介" rows="6" cols="50" placeholder="---请输入个人介绍---"></textarea></td>
</tr>
<tr>
<td><input colspan="2" type="button" value="来点我"/><!--差不多就是用value给按钮起了一个名字-->
<td><input type="submit"/>
<input type="reset" />
<input type="image" name="图片的插入" src="image/image-button.png"/><!--在插入图片的时候要记得是image，同时还要记住加.png的标签一杯正常显示，.png的标签如果不加的话就不能够显示图片-->
</td>
</tr>
<tr>
<td> <input type="hidden" value="这是一个用户注册信息"/></td>
<td></td>
</tr>
<!--为什么要实现下拉菜单为了节省空间-->
</table>
</form><!--创建表单必备form元素-->
</body>
</html>
2.表单构建的编程练习
<!DOCTYPE HTML>
<html>
<head>
<title>表单的第二个编程练习</title>
<meta http-equiv="Content-Type" cotent="Text/html charset=utf-8" />
</head>
<body>
<form>
<table>
<tr>
<td>性别：</td>
<td>
男<input type="radio" name="性别" />
女<input type="radio" name="性别" value="男" checked/>
</td>
</tr>
<tr>
<td>我喜欢的水果</td>
<td>苹果<input type="checkbox" name="我喜欢的水果"/>
梨子<input type="checkbox" name="我喜欢的水果"/>
桃子<input type="checkbox" name="我喜欢的水果"value="苹果" checked />
</td>
</tr>
</table>
</form>
</body>
</html>
扫一扫
3288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
