HTML&CSS基础_表单项一

最新推荐文章于 2023-04-04 16:10:14 发布

chen_zan_yu_

最新推荐文章于 2023-04-04 16:10:14 发布

阅读量220

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/chen_zan_yu_/article/details/91354630

版权

CSS 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

效果链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			表单的作用就是用来将用户信息提交服务器的
			eg:百度的搜索框  注册 登入 这些操作都是需要填写表单
        -->
        
        <!--
        	使用form标签创建一个表单
        	form标签必须指定一个action属性，该属性指向的是一个服务器的地址
        	当我们提交表单是将会提交到cation属性对应的地址
        	
        -->
        <form action="target.html">
        	<!--
        		使用form创建的仅仅是空白的表单
        		我们好需要向form中添加不同的表单
           -->
           <!--
           	作者：1395314176@qq.com
           	时间：2019-06-09
           	描述：使用input来创建一个文本框，他的type属性是text
           			如果希望表单项中的数据会提交到服务器中，
           			还需给单项指定一个name属性
           			
           			在提交按钮中可以通过value属性来指定按钮上的文字
           -->
           
           <!--
           	作者：1395314176@qq.com
           	时间：2019-06-09
           	描述：提交按钮可以将表单中的信息交给服务器
           		 使用input创建一个提交按钮，他的type属性是submit
           		 表示提交信息的名字
           		 
           		 用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器
           		 url地址？查询字符串
           		 格式：
           		 属性=属性值
           		 
           -->
            用户名<input type="text" name="zjr" /><br /><br />
            <!--
            	作者：1395314176@qq.com
            	时间：2019-06-09
            	描述：密码框
            		-使用input创建一个密码框，他的type属性值是password
            -->
            密码<input type="password" name="password"/><br /><br />
            <!--
            	作者：1395314176@qq.com
            	时间：2019-06-09
            	描述：单选按钮
            		-使用input来创建一个单选按钮，他的type属性使用radio
            		-单选按钮通过name属性进行分组，name属性相同的是一组
            		-需要用户选择的，不需要用户填写内容的表单
            		还必须指定一个value属性：这样被选中的单项的value属性值将会最终提交给服务器
            		
            		
            		如果希望在单选按钮或者多选框中指定默认选中的选项
            		则可以在希望选中的项中添加checked="checked"属性
            -->
                       性别<input type="radio" name="gender" value="male"/>男
                <input type="radio" name="gender" value="female" checked="checked"/>女
                <br /><br />
                <!--
                	作者：1395314176@qq.com
                	时间：2019-06-09
                	描述：多选框
                	      -使用input创建一个多选框，他的type属性使用checkbox
                	      
                -->
             
                       爱好<input type="checkbox"name="kk" value="mm" checked="checked"/>梅西
                <input type="checkbox"name="kk"value="nn"checked="checked" />内马尔
                <input type="checkbox"name="kk"value="ll" />西罗
                <input type="checkbox" name="kk"value="pm"/>贝克汉姆
                <input type="checkbox" name="kk"value="kkm"/>贝利
                <br /><br />
                <!--
                	作者：1395314176@qq.com
                	时间：2019-06-09
                	描述：下拉列表
                	     -使用select来创建一个下拉列表
                	     -在下拉列表中使用option标签创建一个一个列表项
                	     -下拉列表的name属性需要指定给select，而value属性需要指定给option
                	     当为select添加一个multiple="multiple",则下拉列表变成一个多选列表
                -->
                你喜欢的明星
                <select name="star" >
                	<!--
                		在select中可以使用optgroup标签对选项分组
                		同一个opgroup中的选项是一组
                		可以通过label属性来指定分组的名字
                    -->
                	<optgroup label="女明星">
                    <option value="zmy">张曼玉</option>
                	<option value="lxx">林青霞</option>
                	<option value="ljx">李嘉欣</option>
                	<option value="lmw" >罗美薇</option>
                	</optgroup>
                	<optgroup label="男明星">
                    <option value="zgr" checked="checked">张国荣</option>
                	<option value="ldh">刘德华</option>
                	<option value="zxy">张学友</option>
                	</optgroup>
                </select><br /><br />
            <input type="submit" value="注册"/>
        </form>
	</body>
</html>

效果图：

chen_zan_yu_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML&CSS基础_表单项一

效果链接<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 表单的作用就是用来将用户信息提交服务器的 eg:百度的搜索框注册登入...
复制链接

扫一扫