简单表单设计标记属性及例⼦
6⽉3⽇笔记
表单的设计
1.表单的标记
（1）<form</form定义表单的开始位置和结束位置
（2）基本格式：<form action=”服务器端地址（接受表单内容的地址）” name=”表单名称” method=”post/get” …</form 2.常⽤属性：
（1）method属性：
<⽅式：get⽅式提交时，会将表单的内容附加在URL地址的后⾯，所以限制了提交内容的长度，不超过8192个字符，且不具备保密性。
2.post⽅式：post⽅式提交时，将表单中的数据⼀并包含在表单的主体中，⼀起传递到服务器中处理，没有⼤⼩限制，具备保密性（2）action：表单数据的处理程序的URL地址，如果表单中不需要使⽤action属性也要指定为no.
（3） enctype属性：设置表单资料的编码⽅式
（4） target属性：指定⽬标窗⼝
3. ⽂本域和密码<input标记
（1）type属性：1.text：表⽰⽂本输⼊域
2.password：表⽰⼀个密码输⼊域
（2）name属性：定义控件的名称
（3）value属性：初始化值，打开浏览器时，⽂本框的内容
（4）size属性：设置控件长度
（5）maxlenght属性：输⼊框中允许输⼊最⼤字符数
4. 提交、重置、普通按钮
（1）当<input type=”submit”时，为提交按钮
（2）当<input type=”reset”时，为重置按钮
（3）当<input type=”button”时，为提交按钮
5. 单选框和复选框
（1）当<input type=”radio”时，为单选按钮
（2）当<input type=”checkbox”时，为复选按钮
注意：单选按钮和复选按钮可以使⽤”checked”属性来设置默认选中项
5.隐藏域：当<type=”hidden”时，为隐藏表单域
6.多⾏⽂本：
（1）⽤法：使⽤<textarea标记可以实现⼀个，能够输⼊多⾏⽂本区域
（2）语法格式：<textarea name=”” rows=”” cols=”” value=””》…</textarea
（3）Rows和cols分别⽤来指定显⽰⾏数和列数单位是字符个数
7.菜单下拉域<select标记
（1）语法格式：<select name=”” size=”” multiple
<option value=”” selected》选项⼀</option
<option value=””》选项⼆</option
<option value=””》选项三</option
…
注意：
以下是⼀个简单的例⼦：
<html>
<head><title>表单的设计</title></head>
textarea中cols表示<body>
<form action="⽂本标记.html" target="_blink">
账号：<input type="text" name="name" value="请输⼊⽤户名" size="10" maxlength="11">
<br><br>
密码：<input type="password" name="password" size="8">
<br><br>
卟啉：<input type="hidden" name="password" size="8">
<br><br>
性别：<input type="radio" name="sex" checked>男<input type="radio" name="sex">⼥
<br><br>
爱好：<input type="checkbox" name="hobby" checked>篮球<input type="checkbox" name="hobby">⽻⽑球  <br><br>
⾃我介绍：<br>
<textarea name="⾃我介绍" cols="35" rows="10" value="zhiwojieshao">
⽟树临风英俊潇洒风流倜傥⾼⼤威猛颜如冠⽟貌⽐潘安才⽐⼦键⽟树临风风度翩翩才⾼⼋⽃⽻扇纶⼱  </textarea>
<br><br>
地址：
<select name="dizhi"><!--这⾥加⼊multiple可以多选-->
<option value="sichuan">四川</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option><!--必须要有value才能传出数据-->
</select>
<br><br>
<input type="submit" value="登录">
<input type="reset" value="重置">
<input type="button" value="按钮">
</form>
</body>
</html>
如果有什么问题请⼤家指出，毕竟我才刚刚学习前端。很多问题可能没留意到

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。