1.学习html制作网页:表单试题及代码
2.用HTML编写一个表单的表单表单程序
3.用HTML制作了表单,有用户名、模板模板码密码、源码源代确认密码、表单表单年龄、模板模板码sim 写卡源码性别,源码源代测速网页导航源码
4.HTML表åä»ç»
学习html制作网页:表单试题及代码
HTML中的表单表单表单大多数用form表单来收集用户的数据,将用户填写的模板模板码数据通过get或者post的方式传递出去,下面简单介绍form表单中的源码源代几种常见的标签
1、新建一个HTML文件,表单表单命名为myExam.html
2、模板模板码演示的源码源代标签有输入文本,对应的表单表单gpu显卡驱动源码标签是type=text,代码实例,模板模板码页面效果如下
3、下一个常用的源码源代标签,单选功能,radio,photoshop1.0源码对应的代码实例和页面效果如下
4、多选标签,checkbox,提供多选的功能,对应的vue框架源码分享代码实例和页面效果如下
5、当页面完成输入后,需要将所填数据传给处理层,以get方式为例,通过submit提交,对应的代码实例和页面效果如下
6、关于form表单,支持的标签如下图
7、本例中完整代码和页面效果如下,仅供参考
工具/材料
浏览器
用HTML编写一个表单的程序
<html>
<head></head>
<body>
<form id="form1" name="form1" method="post" onsubmit ="return check();" action="" >
<p>用户名:
<input type="text" name="textffield" id="textffield" />
</p>
<p>密码:
<input type="password" name="textfield2" id="textffield2" />
</p>
<p>确认密码:
<input type="password" name="textfield3" id="textffield3"/>
</p>
<p>性别:
<input type="radio" name="s" id ="s" value="男" checked/>
男
<input type="radio" name="s" id ="s" value="女" />
女</p>
<p>个人爱好:
<input type="checkbox" name="c" id= "c" value="旅游" checked/>
旅游
<input type="checkbox" name="c" id="c" value="看书" />
看书</p>
<p>籍贯:
<select name="select1" size="1" id= "d">
<option value ="北京" selected>北京</option>
<option value ="上海">上海</option>
<option value ="南京">南京</option>
<option value ="杭州">杭州</option>
<option value ="武汉">武汉</option>
</select><p>
<input type="submit" name="Submit" value="提交" />
<input type="reset" name="Submit2" value="重置" />
</form>
</body>
</html>
<SCRIPT LANGUAGE="JavaScript">
<!--
function check()
{
var result
if(document.getElementById("textffield").value==""){
alert('对不起,用户名不能为空');
document.getElementById("textffield").focus();
return false;
}
else if(document.getElementById("textffield2").value==""){
alert('对不起,密码不能为空');
document.getElementById("textffield2").focus();
return false;
}else if(document.getElementById("textffield3").value!=document.getElementById("textffield2").value){
alert('对不起,两次输入的密码不相同');
document.getElementById("textffield3").focus();
return false;
}else{
result="用户名:"+document.getElementById("textffield").value+"\n性别:"+document.getElementById("s").value+"\n个人爱好:"+document.getElementById("c").value+"\n籍贯:"+document.forms[0].d.options[document.forms[0].d.selectedIndex].value;
alert(result)
}
}
//-->
</SCRIPT>
用HTML制作了表单,有用户名、密码、确认密码、年龄、性别,
<script>
function chek(){
if(document.myForm.pass.value!=document.myForm.pass2.value){
alert('密码不一致');
return false;
}
if(document.myForm.age.value<){
alert('你太小了');
return false;
}
if(document.myForm.username.value.length<3){
alert('用户名不能小于3个字符');
return false;
}
}
</script>
<!--上面的代码加载head里面-->
<form action="" method="get" onSubmit="return chek()" name="myForm">
用户名:<input type="text" name="username">
密码:<input type="password" name="pass">
确认密码:<input type="password" name="pass2">
年龄:<input type="text" name="age">
<input type="submit" value="go!">
</form>
HTML表åä»ç»
HTML表å(Form)æ¯HTMLçä¸ä¸ªéè¦é¨åï¼ä¸»è¦ç¨äºééåæ交ç¨æ·è¾å ¥çä¿¡æ¯ã
举个ç®åçä¾åï¼ä¸ä¸ªè®©ç¨æ·è¾å ¥å§åçHTML表å(Form)ã示ä¾ä»£ç å¦ä¸ï¼
form action="
请è¾å ¥ä½ çå§åï¼
input type="text" name="yourname"
input type="submit" value="æ交"
/form
å¦ä¹ HTML表å(Form)æå ³é®è¦ææ¡çæä¸ä¸ªè¦ç¹ï¼
表åæ§ä»¶(Form Controls)
Action
Method
å 说表åæ§ä»¶(Form Controls)ï¼éè¿HTML表åçåç§æ§ä»¶ï¼ç¨æ·å¯ä»¥è¾å ¥æåä¿¡æ¯ï¼æè ä»é项ä¸éæ©ï¼ä»¥ååæ交çæä½ãæ¯å¦ä¸é¢çä¾å¥éï¼input type= "text"å°±æ¯ä¸ä¸ªè¡¨åæ§ä»¶ï¼è¡¨ç¤ºä¸ä¸ªåè¡è¾å ¥æ¡ã
ç¨æ·å¡«å ¥è¡¨åçä¿¡æ¯æ»æ¯éè¦ç¨åºæ¥è¿è¡å¤çï¼è¡¨åéçactionå°±ææäºå¤ç表åä¿¡æ¯çæ件ãæ¯å¦ä¸é¢ä¾å¥éç
è³äºmethodï¼è¡¨ç¤ºäºåé表åä¿¡æ¯çæ¹å¼ãmethodæ两个å¼ï¼getåpostãgetçæ¹å¼æ¯å°è¡¨åæ§ä»¶çname/valueä¿¡æ¯ç»è¿ç¼ç ä¹åï¼éè¿URLåé(ä½ å¯ä»¥å¨å°åæ éçå°)ãèpoståå°è¡¨åçå 容éè¿httpåéï¼ä½ å¨å°åæ çä¸å°è¡¨åçæ交信æ¯ãé£ä»ä¹æ¶åç¨getï¼ä»ä¹æ¶åç¨postå¢ï¼ä¸è¬æ¯è¿æ ·æ¥å¤æçï¼å¦æåªæ¯ä¸ºåå¾åæ¾ç¤ºæ°æ®ï¼ç¨getï¼ä¸æ¦æ¶åæ°æ®çä¿ååæ´æ°ï¼é£ä¹å»ºè®®ç¨postã
HTML表å(Form)常ç¨æ§ä»¶(Controls)
HTML表å(Form)常ç¨æ§ä»¶æï¼
表åæ§ä»¶(Form Contros) 说æ
input type="text" åè¡ææ¬è¾å ¥æ¡
input type="submit" å°è¡¨å(Form)éçä¿¡æ¯æ交ç»è¡¨åéactionææåçæ件
input type="checkbox" å¤éæ¡
input type="radio" åéæ¡
select ä¸ææ¡
textArea å¤è¡ææ¬è¾å ¥æ¡
input type="password" å¯ç è¾å ¥æ¡(è¾å ¥çæåç¨*表示)
表åæ§ä»¶(Form Control)ï¼åè¡ææ¬è¾å ¥æ¡(input type="text")
åè¡ææ¬è¾å ¥æ¡å 许ç¨æ·è¾å ¥ä¸äºç®ççåè¡ä¿¡æ¯ï¼æ¯å¦ç¨æ·å§åãä¾å¥å¦ä¸ï¼
input type="text" name="yourname"
表åæ§ä»¶(Form Control)ï¼å¤éæ¡(input type="checkbox")
å¤éæ¡å 许ç¨æ·å¨ä¸ç»é项éï¼éæ©å¤ä¸ªã示ä¾ä»£ç ï¼
input type="checkbox" name="fruit" value ="apple"è¹æbr
input type="checkbox" name="fruit" value ="orange"æ¡åbr
input type="checkbox" name="fruit" value ="mango"èæbr
ç¨checked表示缺çå·²éçé项ã
input type="checkbox" name="fruit" value ="orange" checkedæ¡åbr
表åæ§ä»¶(Form Control)ï¼åéæ¡(input type="radio")
使ç¨åéæ¡ï¼è®©ç¨æ·å¨ä¸ç»é项éåªè½éæ©ä¸ä¸ªã示ä¾ä»£ç ï¼
input type="radio" name="fruit" value = "Apple"è¹æbr
input type="radio" name="fruit" value = "Orange"æ¡åbr
input type="radio" name="fruit" value = "Mango"èæbr
ç¨checked表示缺çå·²éçé项ã
input type="radio" name="fruit" value = "Orange" checkedæ¡åbr
表åæ§ä»¶(Form Control)ï¼ä¸ææ¡(select)
ä¸ææ¡(Select)æ¢å¯ä»¥ç¨ååéï¼ä¹å¯ä»¥ç¨åå¤éãåéä¾å¥å¦ä¸ï¼
select name="fruit"
option value="apple"è¹æ
option value="orange"æ¡å
option value="mango"èæ
/select
å¦æè¦åæå¤éï¼å muiltipleå³å¯ãç¨æ·ç¨Ctrlæ¥å®ç°å¤éãä¾å¥ï¼
select name="fruit" multiple
ç¨æ·è¿å¯ä»¥ç¨sizeå±æ§æ¥æ¹åä¸ææ¡(Select)ç大å°ã
表åæ§ä»¶(Form Control)ï¼å¤è¡è¾å ¥æ¡(textarea)
å¤è¡è¾å ¥æ¡(textarea)主è¦ç¨äºè¾å ¥è¾é¿çææ¬ä¿¡æ¯ãä¾å¥å¦ä¸ï¼
textarea name="yoursuggest" cols ="" rows = "3"/textarea
å ¶ä¸cols表示textareaç宽度ï¼rows表示textareaçé«åº¦ã
表åæ§ä»¶(Form Control)ï¼å¯ç è¾å ¥æ¡(input type="password")
å¯ç è¾å ¥æ¡(input type="password")主è¦ç¨äºä¸äºä¿å¯ä¿¡æ¯çè¾å ¥ï¼æ¯å¦å¯ç ãå 为ç¨æ·è¾å ¥çæ¶åï¼æ¾ç¤ºçä¸æ¯è¾å ¥çå 容ï¼èæ¯é»ç¹ç¬¦å·ããä¾å¥å¦ä¸ï¼
input type="password" name="yourpw"
表åæ§ä»¶(Form Control)ï¼æ交(input type="submit")
éè¿æ交(input type=submit)å¯ä»¥å°è¡¨å(Form)éçä¿¡æ¯æ交ç»è¡¨åéactionææåçæ件ãä¾å¥å¦ä¸ï¼
input type="submit" value="æ交"
表åæ§ä»¶(Form Control)ï¼å¾çæ交(input type="image")
input type=image ç¸å½äº input type=submitï¼ä¸åçæ¯ï¼input type=image 以ä¸ä¸ªå¾çä½ä¸ºè¡¨åçæ交æé®ï¼å ¶ä¸ src å±æ§è¡¨ç¤ºå¾ççè·¯å¾ã
input type="image" src ="images/icons/go.gif"
alt = "æ交" NAME="imgsubmit"