HTML学习笔记（三）

三、表单

表单元素：
 提交方式：
 get方式：路径？键 =值 &键=值
    缺点：不安全，传输内容大小有限制
 post方式：
    表单元素通用格式：<input type="表单元素的类型" name="键" value="值">
    表单元素的类型：
       文本类型：
          文本框：text
          密码框：password
          隐藏域：hidden
        按钮类型：
          重置按钮：reset
          提交按钮：submit
        选择类型：
          单选：radio
          注意：需要用name属性进行分组
          多选：checkbox
        label标签
        下拉框：
        <select>
            <option></option>
            <option></option>
            <option></option>
            <option></option>
        </select>
        默认选中：selected
        <textarea>
            多行文本框
        </textarea>
-->

<form action="" enctype="multipart/form-data">
   用户名：<input type="text" name="username" placeholder="请输入用户名">
   密码：<input type="password" name="pwd"><br>
   隐藏域：<input type="hidden"><br>
   普通按钮：<input type="button" value="点我的是傻逼"><br>
   重置按钮：<input type="reset" value="重置">
   提交按钮：<input type="submit" value="提交">
   性别：<label>男<input type="radio" name="sex" checked></label>
        <label>女<input type="radio" name="sex"></label><br>
   爱好：<label>篮球<input type="checkbox" name="lanqiu"></label>
        <label>足球<input type="checkbox" name="zuqiu" disabled></label>
        <label>排球<input type="checkbox" name="paiqiu" checked></label><br>
   上传文件：<input type="file">
   选择大区：<select>
           <option>山东3区</option>
           <option>山东2/7区</option>
           <option selected>山东1区</option>
           <option>山东4区</option>
           <option>山东5区</option>
           <option>山东6区</option>
           </select>
           <br>
    个人简介：<textarea name="" id="" cols="30" rows="10">
        
    </textarea>
           
</form>
</body>
</html>

练习一个表单页面：

首先创建一个新的页面，用表格对页面进行布局，然后通过合并单元格在单元格中输入表单属性。

下面为练习页面的body部分，需要注意的是文本框宽高需要用style="width=;height="来调整

<form action="" enctype="multipart/form-data">
<table align="center" border="0px" cellspacing="0px" cellpadding="10px" width="865px">
<tr>
    <td colspan="2" align="left"><strong>注册新用户</strong></td>
    <td colspan="2"></td>
</tr>
<tr align="left">
    <td width="100px" align="center">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱</td>
    <td colspan="2"><input type="text" name="e-mail" placeholder="请输入用户名" style="width:400px;height:30px"></td>
    <td rowspan="6" align="center" width="273" height="295"><img src="博客园注册页面插图.png" width="280" height="300"></td>
</tr>
<tr>
    <td width="100px" align="center">手机号码</td>
    <td width="30px">+86</td>
    <td><input type="text" name="tel" placeholder="激活账户需要手机短信验证" width="400px" style="width:350px;height:30px"></td>

</tr>
<tr>
    <td align="center">登录名称</td>
    <td colspan="2"><input type="text" name="username" placeholder="登录用户名，不少于4个字符" style="width:400px;height:30px"></td>
</tr>
<tr>
    <td align="center">显示名称</td>
    <td colspan="2"><input type="text" name="showname" placeholder="即昵称，不少于2个字符" style="width:400px;height:30px"></td>
</tr>
<tr>
    <td align="center">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</td>
    <td colspan="2"><input type="text" name="password" placeholder="至少8位，必须包含字母、数字、特殊字符" style="width:400px;height:30px"></td>
</tr>
<tr>
    <td align="center">确认密码</td>
    <td colspan="2"><input type="text" name="confirmpwd" placeholder="请输入确认密码" style="width:400px;height:30px" ></td>
</tr>
    <tr>
        <td colspan="4" align="center"><input type="submit" value="注册"></td>
    </tr><br>
    <tr height="50px">
        <td colspan="4" align="center"><small>*“注册”按钮，表示您同意并愿意遵守<a href="#">用户协议</a></small></td>
    </tr>
    
    <tr>
        <td colspan="4" align="center"><small><a href="#">关于博客园&nbsp;&nbsp;联系我们</a>&copy;2004-2018&nbsp;<a href="https:www.cnblog.com">博客园</a>保留所有权利&nbsp;Powered&nbsp;by&nbsp;ASP.NET&nbsp;Core&nbsp;on&nbsp;Linux</small></td>
    </tr>

    
</table>
</form>

下面是F12之后的效果图

 

转载于:https://www.cnblogs.com/boringLee/p/8405882.html