今天写一个简单的注册信息的表单,样式如图:
<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
title
>Document
</
title
>
<
style
>
form div {
margin:
20px;
}
<
/
style
>
</
head
>
<
body
>
<!--
上传数据的方式
get 把参数拼接到url的后面 缺点 :1数据全部暴露 不安全 2url长度有限的
post 安全
-->
<!-- action 是数据要提交到的地址 -->
<!--'name:xiaoming
psw:123456
hobby: chi
key:value
'-->
<
form
action=
"http://www.baidu.cn"
method=
"post"
>
<!--name属性 指定上传数据的key的名字-->
<
div
>
<!--label可以把文字和输入框关联,点击文字输入框就会有焦点 -->
<
label
for=
"username"
>姓名:
</
label
>
<
input
type=
"text"
name=
"name"
id=
"username"
>
</
div
>
<
div
>
<
label
for=
"psw"
>密码:
</
label
>
<!--注意type-->
<
input
type=
"password"
name=
"password"
id=
"psw"
>
</
div
>
<
div
>
性别:
<!--name值相同 才能单选
value是上传的值
这里用0代表男
1代表女
-->
<
input
type=
"radio"
name=
"gender"
value=
"0"
>男
<
input
type=
"radio"
name=
"gender"
value=
"1"
>女
</
div
>
<
div
>
爱好:
<
input
type=
"checkbox"
name=
"hobby"
value=
"sing"
>唱歌
<
input
type=
"checkbox"
name=
"hobby"
value=
"run"
>跑步
<
input
type=
"checkbox"
name=
"hobby"
value=
"swing"
>游泳
<
input
type=
"checkbox"
name=
"hobby"
value=
"study"
>学习
</
div
>
<
div
>
照片:
<
input
type=
"file"
>
</
div
>
<
div
>
个人描述
<!--cols初始的时候的列的数量
rows初始的时候的行的数量
-->
<
textarea
name=
"desc"
id=
""
cols=
"30"
rows=
"10"
>
</
textarea
>
</
div
>
<
div
>
籍贯:
<!--select标签的value值 就是下面选中的option的value值-->
<
select
name=
"loc"
id=
""
value=
''
>
<
option
value=
"0"
>北京
</
option
>
<
option
value=
"1"
>上海
</
option
>
<
option
value=
"2"
>广州
</
option
>
<
option
value=
"3"
>深圳
</
option
>
</
select
>
</
div
>
<
div
>
<
input
type=
"submit"
value=
"注册"
>
<
input
type=
"reset"
value=
"重置"
>
</
div
>
</
form
>
</
body
>
</
html
>
一个简单的表单注册提交就这样完成了