首页 > 代码库 > HTML-表单

HTML-表单

2024-08-17 21:45:03   219人阅读

表单

<form id="" name="" method="post/get" action="负责处理的服务端"> </form>

在表单中能放置什么内容？

 

1、文字输入

技术分享 
<form>
账号：<input type="text"  /><br />
密码：<input type="password" /><br />
<br />
账号：<input type="text" value=http://www.mamicode.com/"wow-wolcome" /><br />
密码：<input type="password" /><br />
<br />
账号：<input type="text" placeholder="请输入账号" /><br />
密码：<input type="password" /><br />
<br />
说说<textarea cols="35" rows="6"></textarea>
</form>
文字输入

技术分享

    文本框：<input type="text" />  可以不设置其他    设置value值——设置默认值    设置placeholder值——设置提示信息，灰色显示，输入时消失

        内容可以是数字、英文、汉字、符号

    密码框：<input type="password"/> 不管输入什么 显示的都是黑点

    文字域：<textarea cols=""（横向字符个数） rows=""（纵向行数）>输入的内容会出现在此</textarea>

 

2、按钮

技术分享 
<form>
账号：<input type="text" value=http://www.mamicode.com/"张三" disabled="disabled" /><br />
密码：<input type="password" /><br />
<input type="submit" value=http://www.mamicode.com/"提交信息" />
&nbsp;<input type="reset" disabled="disabled" /><br />
<input type="button" value=http://www.mamicode.com/"登入，未设置，无实际作用" /><br />
<input type="image" src=http://www.mamicode.com/"魔兽世界1.jpg" width="250"  />
</form>
按钮

技术分享

    提交按钮：<input type="submit"  value="" />   提交，对于整个表单进行获取，并进行上传，必须在表单内才能起作用（value值是显示按钮上的信息）

    重置按钮：<input type="reset" />  针对整个表单进行重置

    普通按钮：<input type="button" />  普通按钮

    图片按钮：<input type="image" src="http://www.mamicode.com/图片地址" />  默认与提交一样

技术分享

  <disabled="disabled"  />  是输入的信息不可更改或按钮失效

 

3、选择输入

 

技术分享 
<form>
<input type="radio" name="sex" checked="checked" />男&nbsp;
<input type="radio" name="sex"  />女<br />
<br />
<input type="checkbox" checked="checked" disabled="disabled" />可口可乐<br />
<input type="checkbox"  />百事可乐<br />
<input type="checkbox"  />雪碧<br />
<input type="checkbox"  />芬达<br /><br />
<br />
<input type="file"  /><br />
<br />
<select size="1" >
<option value=http://www.mamicode.com/"1" >可口可乐</option>
<option value=http://www.mamicode.com/"2" >百事可乐</option>
<option value=http://www.mamicode.com/"3" >雪碧</option>
<option value=http://www.mamicode.com/"4" >芬达</option>
</select>
</form>
选择输入、下拉列表

 

 

 

技术分享

    单选按钮组：<input type="radio" name="one" checked="checked" /> 内容       单选按钮组，name的值用来分组，checked设置为默认值

    多选按钮：<input type="checkbox" />内容    

    上传文件：<input type="file" >       用来上传文件

    下拉菜单列表：<select size="1" >   size为1时，为菜单；size>1时，为列表

                          <option value="http://www.mamicode.com/1" >内容</option>

                          <option value="http://www.mamicode.com/2" selected="selected" >内容</option>    selected为默认值

                        </select>

 

练习题

技术分享 
<body background="绿色线条.jpg" >
<table width="550" height="580" border="0" align="center">
<tr align="center">
<td colspan="2"><font size="+2"><b>账户注册</b></font></td>
</tr>
<tr>
 <td width="100">邮箱：</td>
 <td>
  <form>
  <input type="text"  />
  </form>
 </td>
</tr>
<tr>
 <td></td>
 <td>需要通过邮箱激活账户，不支持sohu，21cn，sougou的邮箱</td>
</tr>
<tr>
 <td>登入用户名：</td>
 <td>
  <form>
  <input type="text" />
  </form>
 </td>
</tr>
<tr>
 <td></td>
 <td>仅在登入时使用，字符不少于4个</td>
</tr>
<tr>
 <td>显示名称：</td>
 <td>
 <form>
 <input type="text" />
 </form>
 </td>
</tr>
<tr>
 <td></td>
 <td>即昵称，字符数不少于2个</td>
</tr>

<tr>
 <td>密码：</td>
 <td>
 <form>
 <input type="password" />
 </form>
 </td>
</tr>
<tr>
 <td>确认密码：</td>
 <td>
 <form>
 <input type="password" />
 </form>
 </td>
</tr>
<tr>
 <td></td>
 <td>至少8位，包含字符、数字、特殊字符</td>
</tr>

<tr>
 <td>性别：</td>
 <td>
 <form>
 <input type="radio" checked="checked" />男&nbsp;
 <input type="radio"  />女
 </form>
 </td>
</tr>
<tr>
 <td>喜好：</td>
 <td>
 <form>
 <input type="checkbox" />音乐&nbsp;
 <input type="checkbox" />美术&nbsp;
 <input type="checkbox" />运动&nbsp;
 <input type="checkbox" />手工<br />
 <input type="checkbox" />逛街&nbsp;
 <input type="checkbox" />网购&nbsp;
 <input type="checkbox" />美食&nbsp;
 <input type="checkbox" />烹饪<br />
 <input type="checkbox" />阅读&nbsp;
 <input type="checkbox" />游戏&nbsp;
 <input type="checkbox" />健身&nbsp;
 <input type="checkbox" />美容
 </form>
 </td>
</tr>
<tr>
 <td>家庭住址：</td>
 <td>
 <form>
 <select size="1" >
 <option>—请选择—</option>
 <option>张店区</option>
 <option>淄川区</option>
 <option>博山区</option>
 <option>临淄区</option>
 <option>周村区</option>
 <option>沂源县</option>
 <option>桓台县</option>
 <option>高青县</option>
 <option>高新区</option>
 <option>文昌湖风景旅游区</option>
 </select>
 </form>
 </td>
</tr>
<tr align="center">
<td colspan="2">
 <form>
 <input type="submit" value=http://www.mamicode.com/"提交信息" />
 &nbsp;&nbsp;&nbsp;&nbsp;
 <input type="reset" value=http://www.mamicode.com/"重新填写" />
 </form>
</td>
</tr>
</table>
</body>
练习题

技术分享

 

HTML-表单


联系
我们