表单:见用户信息提交给服务器
目录
使用form标签创建一个表单:
action:
form标签中必须指定一个action属性,该属性指向一个服务器地址。当我们提交表单时候会提交到action对应的地址
表单项:
input:
创建一个文本框。
type:"text"--->如果希望表单项中的数据会提交到服务器中,还必须给表单指定一个name属性。name表示提交内容的名字,用户提交的信息会附在url后面的地址上以查询字符串的形式发送给服务器。格式:属性名= 属性值&属性名= 属性值&属性名= 属性值(可以有多个名值对,之间用&隔开)
在文本框中也可以使用value。为文本框中的默认值
创建一个提交按钮:
type:"submit"
使用value设置提交的值
创建一个密码框
type:"password"
创建一个单选按钮
type:"radio";
单选按钮使用name分组,name属性相同的是一组按钮
像这种需要用户选择的但是不需要用户填写内容的表单项,必须指定一个value属性,这样
创建一个多选框
type:"chexkbox";
多选框使用name分组,name属性相同的是一组按钮
需要指定value属性。
下拉列表
使用select来创建
使用option来创建一个一个的列表项。
下拉列表的name指定给select,value指定给option
multiple = "multiple"可以使下拉列表设置为一个多选的下拉列表。
optgroup:对选项进行分组,同一个optgroup中的选项是一组,可以通过label属性来指定分组的名字。
设置默认选中
如果希望单选按钮或者多选按钮中指定默认的选中框,加checked = "checked"属性
如果希望下拉列表中指定默认的选中框,加 selected = "selected";
创建一个多行文本域
textarea 创建 css设置大小
创建一个重置按钮
type = "reset" 重置按钮 点击以后表单中的内容恢复为默认值。
创建一个新的按钮
type = "button" 单纯的点击按钮
单纯的button也可以创建按钮
这种方式和input类似,但是它是成对出现的标签,更加灵活
<input type="submit" value="我要注册" />
<input type="reset" />
<input type="button" value="按钮" />
<br />
<button type="submit">注册</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
用来选中用户提交的文字
lable
使用lable标签选中的文字,鼠标移入后光标不会发生改变,可以设置一个for id值
为表单项进行分组
fieldset:可以将表单项中的同一组放在field中。
legend子标签来指定组名。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<form action="target.html">
<fieldset>
<legend>用户信息</legend>
<label for="123">用户名</label>
<input id="123" name="uesrname"/><br />
<label for="12">密码</label>
</fieldset>
<fieldset>
<input id="12" name="password" /><br />
性别
<label for = "1233">男</label><input type="radio" name="gender" value="man" id="1233"/>
<label for="789">女</label><input type="radio" name="gender" value="woman" checked="checked"/>
<br />
爱好
篮球<input type="checkbox" name="hobby" value="lq" checked="checked"/>
足球<input type="checkbox" name="hobby" value="zq"/>
球<input type="checkbox" name="hobby" value="q"/>
乒乓球<input type="checkbox" name="hobby" value="pqq"/>
<br />
</fieldset>
<select name="star" multiple="multiple">
<optgroup label="women">
<option value="z" selected="selected">li</option>
<option value="a">benshan</option>
<option value="aa">xi</option>
</optgroup>
<optgroup label="man">
<option value="z" selected="selected">li</option>
<option value="a">benshan</option>
<option value="aa">xi</option>
</optgroup>
</select>
<br />
自我介绍<textarea>
</textarea>
<br />
<input type="submit" value="我要注册" />
<input type="reset" />
<input type="button" value="按钮" />
<br />
<button type="submit">注册</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
</form>
</body>
</html>