• 技术文章 >web前端 >html教程

    HTML如何制作表单

    醉折花枝作酒筹醉折花枝作酒筹2021-04-07 16:27:26原创79

    制作表单的方法:首先使用form标签创建表单,搭建表单框架;然后使用input标签创建文本输入框和提交按钮;接着使用select和option标签创建下拉列表;最后使用textarea标签创建文本区域即可。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    HTML 表单

    HTML 表单-输入元素

    文本域(Text Fields)

    <form>
    	<h3>用户注册页面</h3>
    	用户名:<input name = "username "type = "text"><br />	
    </form>

    在这里插入图片描述

    密码字段

    <form>
    	密码:<input name = "passwd1" type="password"><br />
    	确认密码:<input name = "passwd2" type = "password"><br />	
    </form>

    在这里插入图片描述

    单选按钮(Radio Buttons)

    <form>
    性别:<input name = "sex" value = "1" type = "radio" >男
         <input name = "sex" value = "0" type = "radio" checked = "checked">女<br />
     </form>

    在这里插入图片描述

    复选框(Checkboxes)

    <form>
    爱好:<input name = "hobby" type = "checkbox" value="吃饭">吃饭
         <input name = "hobby" type = "checkbox" value="睡觉">睡觉
         <input name = "hobby" type = "checkbox" value="打游戏">打游戏<br />
     </form>

    在这里插入图片描述

    简单的下拉列表

    <form>
    出生日期:
    			<select name = "year" >	
    					<option value="2019">2019</optiom>
    					<option value="2018">2018</optiom>
    					<option value="2017">2017</optiom>
    					<option value="2016">2016</optiom>		
    			</select>
    			<select name = "month">	
    					<option value="1">1</optiom>
    					<option value="2">2</optiom>
    					<option value="3">3</optiom>
    					<option value="4">4</optiom>
    					<option value="5">5</optiom>	
    					<option value="6">6</optiom>
    					<option value="7">7</optiom>
    					<option value="8">8</optiom>
    					<option value="9">9</optiom>
    			</select>
    			<select name = "day">	
    					<option value="1">1</optiom>
    					<option value="2">2</optiom>
    					<option value="3">3</optiom>
    					<option value="4">4</optiom>	
    					<option value="5">5</optiom>	
    					<option value="6">6</optiom>
    					<option value="7">7</optiom>
    					<option value="8">8</optiom>
    					<option value="9">9</optiom>
    					
    			</select>	
     </form>

    在这里插入图片描述

    重置

    <form>
    <input type="reset" value="重置">
     </form>

    在这里插入图片描述

    提交按钮(Submit Button)

    <input type="submit" value="同意以下服务协议,提交注册信息">

    在这里插入图片描述

    文本域(Textarea)

    <textarea name="wenben"></textarea>

    在这里插入图片描述

    完整代码

    <html>
    	<head>
    		<title>注册页面</title>
    		<meta charset="utf-8">
    	</head>
    	<body>
    		<form
    			action="#"
    			method="post"
    			enctype="multiple/form-data"			
    		>
    		<h3>用户注册页面</h3>
    		用户名:<input name = "username"type = "text"><br />
    		<!--头像上传<input type="file" name="photos"><br />-->
    		
    		密码:<input name = "passwd1" type="password"><br />
    		确认密码:<input name = "passwd2" type = "password"><br />
    		性别:<input name = "sex" value = "1" type = "radio" >男
    		     <input name = "sex" value = "0" type = "radio" checked = "checked">女<br />
    		爱好:<input name = "hobby" type = "checkbox" value="吃饭">吃饭
    			<input name = "hobby" type = "checkbox" value="睡觉">睡觉
    			<input name = "hobby" type = "checkbox" value="打游戏">打游戏<br />
    		出生日期:
    			<select name = "year" >	
    					<option value="2019">2019</optiom>
    					<option value="2018">2018</optiom>
    					<option value="2017">2017</optiom>
    					<option value="2016">2016</optiom>		
    			</select>
    			<select name = "month">	
    					<option value="1">1</optiom>
    					<option value="2">2</optiom>
    					<option value="3">3</optiom>
    					<option value="4">4</optiom>
    					<option value="5">5</optiom>	
    					<option value="6">6</optiom>
    					<option value="7">7</optiom>
    					<option value="8">8</optiom>
    					<option value="9">9</optiom>
    			</select>
    			<select name = "day">	
    					<option value="1">1</optiom>
    					<option value="2">2</optiom>
    					<option value="3">3</optiom>
    					<option value="4">4</optiom>	
    					<option value="5">5</optiom>	
    					<option value="6">6</optiom>
    					<option value="7">7</optiom>
    					<option value="8">8</optiom>
    					<option value="9">9</optiom>AA		
    			</select>					
    		<br />
    		<input type="reset" value="重置"> &nbsp; &nbsp; &nbsp;
    		<input type="submit" value="同意以下服务协议,提交注册信息">		
    		<br />
    		<textarea name="wenben">
    		</textarea>
    		<input  type="hidden" name="token" value="cbff36039c3d0212b3e34c23dcde1456">		
    		</form>
    	</body>
    </html>

    实验结果

    在这里插入图片描述

    【推荐学习:Html5教程

    以上就是HTML如何制作表单的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:html 表单
    上一篇:如何在HTML中插入视频 下一篇:html设置背景图片的代码是什么
    第15期线上培训班

    相关文章推荐

    • 如何解决html打开乱码问题• js怎么去掉html标签• html怎么去掉超链接的下划线• html怎么设置不换行• html怎么隐藏滚动条

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网