一个初学者的笔记~~~控件做注册页面(小声:超级详细!
环境:WebStorm 2021.2.2
语言:HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控件</title>
</head>
<body>
<!--
和用户交互:
1.超链接
2.控件(标签)
-->
<!--
<form> HTML 元素表示包含用于提交信息的交互式控件的文档部分
action属性: 设置地址
method属性:(提交方式)
get(默认值)数据跟随地址栏提交的地址,使用明文方式(能看见密码)传输
post()地址栏隐藏传输文字
<input>标签 (控件输入标签)
type属性:
text :文本框
placeholder: 隐含提示文字
maxlength:最大长度
size= ”xx px“: text方框的长度
radio 单选框 重复+name="sex":单选
checkbox 复选框
checked="checked":默认被选中
date:日期
password:密码
input的元素关联:(文字与要填的框产生关联)
<input ... id="a"> <label for="a">文字</label>(label标签夹上文字即可)
<select> HTML 元素表示一个控件,该控件提供选项菜单。
<option>是下属各个选项
<textarea> HTML 元素表示多行纯文本编辑控件
placeholder: 隐含提示文字
cols:宽度
rows:长度<button>:(控件)按钮
type属性:设置按钮的类别
submit:提交
reset:重置(当前表单范围内所有的控件回归为默认的最初状态)
-->
<!--
marquee标签:横向滚动(滚屏)
-->
<h1 align="center">欢迎注册火影角色</h1>
<marquee bgcolor="pink" behavior="" direction="">你将来到火影世界,用自己的视角体验火影人生</marquee>
<hr color="red" size="5px">
<!--<form action="../day3/target.html" method="">-->
<form action="https://hyrz.qq.com/main.shtml" method="">
<table border="0">
<tr>
<td>昵称:</td>
<!--黄框:不完善,能用,此input进行元素关联<label>即可-->
<!--如果希望表单提交的时候控件中的值能被伴随发送(提交)需要给对应的控件name属性(实际应用是必须的)-->
<td><input type="text" placeholder="请输入你在火影世界的名字(最长为10字符)" size="35px" maxlength="10" name="name"></td>
</tr>
<tr>
<td>性别:</td>
<td>
<!--
单选框:默认情况下如果被选中了都会发送on(代表选中了其中一个)
需要给单选框设置value属性,当对应的单选框被选中并提交的时候,value属性值就会被加以发送。
-->
<input type="radio" name="sex" checked="checked" id="sex_male" value="sex_male"><label
for="sex_male">男</label>
<input type="radio" name="sex" id="sex_female" value="sex_female"><label for="sex_female">女</label>
<input type="radio" name="sex" value="unknown" id="sex_unknown"><label for="sex_unknown">未知</label>
</td>
</tr>
<tr>
<td>偏好:</td>
<td>
<!--
复选框数据传输方式与单选框同
1.发送数据对应控件设置name属性
2.通过value属性设置值,提交时就可把对应的值发送
-->
<input type="checkbox" name="good at" value="忍术">忍术
<input type="checkbox" name="good at" value="体术">体术
<input type="checkbox" name="good at" value="幻术">幻术
<input type="checkbox" name="good at" value="精神力">精神力
<input type="checkbox" name="good at" value="智力">智力
</td>
</tr>
<tr>
<td>出生日期:</td>
<td><input type="date" name="born"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" placeholder="请输入密码" name="password"></td>
</tr>
<tr>
<td>请再次输入密码:</td>
<td><input type="password" placeholder="请再次输入密码" name="reenter password"></td>
</tr>
<tr>
<td>出生地:</td>
<td>
<!--发送菜单内容
1.给select标签设置name属性
2.给每个选项单独设置value值
-->
<select name="忍村">
<option value="">--请选择--</option>
<option value="火影村">火影村</option>
<option value="岩隐村">岩隐村</option>
<option value="砂隐村">砂隐村</option>
<option value="雾隐村">雾隐村</option>
<option value="云隐村">云隐村</option>
<option value="流浪忍者">流浪忍者</option>
</select>
</td>
</tr>
<tr>
<td>选择家族:</td>
<td>
<select name="family">
<option value="">--请选择--</option>
<option value="宇智波">宇智波</option>
<option value="漩涡">漩涡</option>
<option value="千手">千手</option>
<option value="鬼灯">鬼灯</option>
<option value="猿飞">猿飞</option>
<option value="志村">志村</option>
</select>
</td>
<td><input type="text" placeholder="自定义家族" name="family"></td>
</tr>
<tr>
<td>请输入你的忍道:</td>
<td>
<textarea cols="30" rows="10" placeholder="请输入你的忍道" name="忍道"></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit">注册</button>
<button type="reset">重置</button>
</td>
</tr>
</table>
</form>
</body>
</html>
- 跳转到浏览器后:
- 点击注册按钮后发送注册内容到...
- 想法:
嘿嘿 初衷是做一个火影游戏,不是那种橙光游戏,是小说«网游之近战法师»那种高自由度还有剧情,各个服务器能连接(就像游戏参与者是小说中穿越火影中的那种程度,每个人所面对的剧情都是不一样的),最想要是全真!! 希望有生之年能体验到全真技术!!!
奈何技术有限,只能做到简约版的注册页面,所以此处插的是火影官方游戏的链接(~ . ~)