PC端和安卓Web端实现效果
PC段
安卓Web端
form表单
定义和用法
标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
例如：
单选
<input type="radio" />
按钮
<input type="button" value="Submit" />
文本框
<input type="text" name="name" />
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。
for代码
<form id="frm" runat="server"> 姓名： <br /> <input placeholder="请输入你的内容" value="" type="text" id="userName" runat="server" aria-dropeffect="move" maxlength="5" /><br /> <asp:Label ID="userNameTips" runat="server" ClientIDMode="AutoID" Font-Size="Smaller" ForeColor="#CC0000"></asp:Label> <br /> <br /> <br /> 您来访的目的？<br /> <br /> <label> <input type="radio" name="destination" value="米老师" id="radOne" runat="server" /> 黑格尔 </label> <br /> <label> <input type="radio" name="destination" value="纪老师" id="radTwo" runat="server" /> 亚里士多德 </label> <br /> <label> <input type="radio" name="destination" value="其他" id="radThree" runat="server" /> 奥斯特洛夫斯基 </label> <br /> <asp:Label ID="objectiveTips" runat="server" Font-Size="Smaller" ForeColor="#CC0000"></asp:Label> <br /> <br /> <br /> <div id="btn"> <asp:Button ID="submit" runat="server" OnClick="submit_Click" Text="提交问卷" /> </div> </form>
CSS格式
<style> h1 { color: orange; padding-top: 30px; text-align: center; margin-bottom: 120px; } form { padding-left: 100px; line-height: 180%; } input { /*border-color: black;*/ border-top-width: 0px; border-right-width: 0px; border-bottom-width: 2px; border-left-width: 0px; } #btn { text-align: center; margin-right: 80px; } </style>
完整代码
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>访客登记</title> <style> h1 { color: orange; padding-top: 30px; text-align: center; margin-bottom: 120px; } form { padding-left: 100px; line-height: 180%; } input { /*border-color: black;*/ border-top-width: 0px; border-right-width: 0px; border-bottom-width: 2px; border-left-width: 0px; } #btn { text-align: center; margin-right: 80px; } </style> </head> <body> <div class="index"> <h1>访客登记</h1> <form id="frm" runat="server"> 姓名： <br /> <input placeholder="请输入你的内容" value="" type="text" id="userName" runat="server" aria-dropeffect="move" maxlength="5" /><br /> <br /> <br /> <br /> 您来访的目的？<br /> <br /> <label> <input type="radio" name="destination" value="米老师" id="radOne" runat="server" /> 黑格尔 </label> <br /> <label> <input type="radio" name="destination" value="纪老师" id="radTwo" runat="server" /> 亚里士多德 </label> <br /> <label> <input type="radio" name="destination" value="其他" id="radThree" runat="server" /> 奥斯特洛夫斯基 </label> <br /> <asp:Label ID="objectiveTips" runat="server" Font-Size="Smaller" ForeColor="#CC0000"></asp:Label> <br /> <br /> <br /> <div id="btn"> <asp:Button ID="submit" runat="server" OnClick="submit_Click" Text="提交问卷" /> </div> </form> </div> <br /> <br /> <br /> <div style="text-align: center" id="metaverse">© <a href="http://tfjy.com/" target="_blank">天赋吉运</a></div> <p> </p> </body> </html>
