基础的前端表格和表单综合小例子

最新推荐文章于 2022-07-05 23:27:01 发布

indolent..

最新推荐文章于 2022-07-05 23:27:01 发布

阅读量198

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/m0_63443066/article/details/123981533

版权

<html>
<head>
<meta type="chareset="utf-8">
<script type="text/javascript">
    //设置普通按钮的点击方法
function check(){
		alert("请仔细核对信息");
	}
</script>
</head>
    //跳转到百度的页面，可以自己更换
<form action="https://www.baidu.com/" >
    //使表格居中
<table align="center"border="1px" >
    //给下方表格起一个名字
    <caption>产品订购</caption>
	<tr>
        //使表格的标题居中
		<th  colspan="4" >产品订购</th>
	</tr>
	<tr>
		<td align="center">姓&emsp;&emsp;名:</td>
        //拥有单行文本框（一个可输入的文本框）
		<td><input type="text"></td>
		<td align="center">联系电话:</td>	
		<td><input type="text"></td>

	</tr>
	<tr>
		<td align="center">产品名称:</td>
		<td><input type="text" colspan="3" >
        //可选择文件
        <input type="file"></td>
	</tr>
	<tr>
        //三个选项的单选框
		<td align="center" wight="25dp">付款方式：</td>
		<td wight="75dp" colspan="3" >
		<input type="radio" name="nong">微信<br>
		<input type="radio" name="nong">支付宝<br>
		<input type="radio" name="nong">货到付款
		</td>
	</tr>
	<tr>
           //四个选项的复选框
		<td align="center">关注产品：</td>
		<td colspan="3" >
		<input type="checkbox" name="ok">家具
		<input type="checkbox" name="ok">家电
		<input type="checkbox" name="ok">服装
		<input type="checkbox" name="ok">化妆品
		</td>
	</tr>
	<tr>
		<td align="center">地&emsp;址：</td>
		<td  colspan="3" >
		<select name="cd" sice="3">
        //下拉框 （selected是默认选择的标志）
		<option value="我" selected="selected">请输入地址：</option>
		<option value="我">河北省</option>
		<option value="我">河南省</option>
		</select>
		
		<select name="cp">
		<option value="c" selected="selected" >请输入地址：</option>
		<option value="c">石家庄</option>
		<option value="c">邯郸市</option>
		<option value="c">邢台</option>
		<option value="c">秦皇岛</option>
		<option value="我"><input type="text"></option>
		</select>
		
	</td>
	</tr>
	<tr>
        //多行文本框，可以设置宽高
		<td align="center">备注:</td>
		<td colspan="3"><textarea name="cc" rows="3" cols="50"></textarea ></td>
	</tr>

<tr>
	<td colspan="4" align="center">
        //普通按钮，设置了点击的方法，value可以更改按钮的提示信息
		<input type="button" value="核对" onclick="check()" />
        //提交按钮
		<input type="submit" value="提交"/>
        //重置按钮
		<input type="reset" name="cz" value="重置"/>
	
	</td>
</tr>
</table>
</form>
</body>
</html>

indolent..

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基础的前端表格和表单综合小例子

<html><head><meta type="chareset="utf-8"><script type="text/javascript"> //设置普通按钮的点击方法function check(){ alert("请仔细核对信息"); }</script></head> //跳转到百度的页面，可以自己更换<form action="https://www.baidu.com/" &gt.
复制链接

扫一扫